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.