動的に作成された入力テキストフィールドにng-modelを追加する方法

問題は、動的に追加された入力フィールドに、jQueryで追加したときにクリックイベントがないことです。 ng-clickを追加する 十分ではありません。 $compileを使用する必要があります この要素をAngularで解析できるようにします。

ただし、はるかに賢い方法は、jQueryをまったく使用せず、ng-repeatを使用してAngular自体によってフィールドを生成させることです。 。

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をバインドできます。 それらへのイベント。 Angularで解析されるため、箱から出してすぐに機能します。 addValues 関数は単にvm.fieldsを使用する必要があります 実際にデータベースに値を追加します。