Das Problem ist, dass Ihre dynamisch hinzugefügten Eingabefelder kein Klickereignis haben, wenn Sie sie mit jQuery hinzufügen. Hinzufügen von ng-click
ist nicht genug. Sie müssten $compile
verwenden um dieses Element von Angle parsen zu lassen.
Der viel klügere Weg ist jedoch, jQuery gar nicht zu verwenden und die Felder von angle selbst mit ng-repeat
generieren zu lassen .
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 diesem Beispiel können Sie beliebig viele Elemente hinzufügen und ng-click
binden Veranstaltungen zu ihnen. Sie werden sofort einsatzbereit sein, da sie mit eckig geparst wurden. Ihre addValues
Funktion muss jetzt einfach vm.fields
verwenden um die Werte tatsächlich zur Datenbank hinzuzufügen.