hoe ng-model toe te voegen aan dynamisch aangemaakte invoertekstvelden

Probleem is dat uw dynamisch toegevoegde invoervelden geen klikgebeurtenis hebben wanneer u ze toevoegt met jQuery. ng-click toevoegen is niet genoeg. Je zou $compile . moeten gebruiken om dit element hoekig te laten ontleden.

De veel slimmere manier is echter om helemaal geen jQuery te gebruiken en de velden door angular zelf te laten genereren met 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 dit voorbeeld kunt u een willekeurig aantal elementen toevoegen en ng-click bind binden gebeurtenissen voor hen. Ze zullen out-of-the-box werken, omdat ze zijn geparseerd met hoekig. Uw addValues functie moet nu gewoon vm.fields . gebruiken om de waarden daadwerkelijk aan de database toe te voegen.