Il problema è che i campi di input aggiunti dinamicamente non hanno un evento click quando li aggiungi con jQuery. Aggiunta di ng-click
non è abbastanza. Dovresti usare $compile
per lasciare che angular analizzi questo elemento.
Tuttavia, il modo molto più intelligente è non usare affatto jQuery e lasciare che i campi siano generati da angular stesso 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>
In questo esempio puoi aggiungere un numero qualsiasi di elementi e associare ng-click
eventi a loro. Funzioneranno immediatamente, poiché analizzati con angular. I tuoi addValues
la funzione ora deve semplicemente usare vm.fields
per aggiungere effettivamente i valori al database.