Проблемът е, че вашите динамично добавени полета за въвеждане нямат събитие за щракване, когато ги добавите с jQuery. Добавяне на ng-click
не е достатъчно. Ще трябва да използвате $compile
за да позволи на angular да анализира този елемент.
Много по-интелигентният начин обаче е изобщо да не използвате jQuery и да оставите полетата да се генерират от самия angular с 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>
В този пример можете да добавите произволен брой елементи и да свържете ng-click
събития към тях. Те ще работят извън кутията, тъй като са анализирани с ъглови. Вашите addValues
функцията сега просто трябва да използва vm.fields
за действително добавяне на стойностите към базата данни.