MongoDB
 sql >> Base de Dados >  >> NoSQL >> MongoDB

como adicionar ng-model a campos de texto de entrada criados dinamicamente


O problema é que seus campos de entrada adicionados dinamicamente não têm um evento de clique quando você os adiciona com jQuery. Adicionando ng-click não é o suficiente. Você teria que usar $compile para permitir que o angular analise este elemento.

No entanto, a maneira muito mais inteligente é não usar jQuery e deixar os campos serem gerados pelo próprio angular com ng-repeat .


angular
  .module('app', [])
  .controller('dynamicFieldsController', dynamicFieldsController);

dynamicFieldsController.$inject = ['$scope'];

function dynamicFieldsController($scope){
  var vm = this;
  vm.numOfFields = 0;
  vm.fields = [];
  vm.add = function() {
    for (var i = 0; i < vm.numOfFields; i++) {
        var index = vm.fields.length;
        vm.fields.push(index);
    }
  }
}
input{
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='dynamicFieldsController as vm'>
  <input placeholder='num of fields' ng-model='vm.numOfFields'>
  <button ng-click='vm.add()'>add</button>
  <input type='text' ng-repeat='field in vm.fields' value='{{ field }}'>
</div>

Neste exemplo, você pode adicionar qualquer número de elementos e vincular ng-click eventos para eles. Eles funcionarão fora da caixa, desde que analisados ​​com angular. Seus addValues função agora simplesmente tem que usar vm.fields para realmente adicionar os valores ao banco de dados.