MongoDB
 sql >> Datenbank >  >> NoSQL >> MongoDB

wie man ng-model zu dynamisch erstellten Eingabetextfeldern hinzufügt

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.