El problema es que sus campos de entrada agregados dinámicamente no tienen un evento de clic cuando los agrega con jQuery. Agregando ng-click
no es suficiente. Tendrías que usar $compile
para permitir que angular analice este elemento.
Sin embargo, la forma mucho más inteligente es no usar jQuery en absoluto y dejar que angular genere los campos con 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>
En este ejemplo, puede agregar cualquier cantidad de elementos y enlazar ng-click
eventos para ellos. Funcionarán de inmediato, ya que se analizaron con angular. Tus addValues
la función ahora simplemente tiene que usar vm.fields
para agregar los valores a la base de datos.