cách thêm ng-model vào các trường văn bản đầu vào được tạo động

Vấn đề là các trường đầu vào được thêm động của bạn không có sự kiện nhấp chuột khi bạn thêm chúng bằng jQuery. Thêm ng-click Không đủ. Bạn sẽ phải sử dụng $compile để phân tích cú pháp góc phần tử này.

Tuy nhiên, cách thông minh hơn nhiều là hoàn toàn không sử dụng jQuery và để các trường được tạo bởi chính góc với 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>

Trong ví dụ này, bạn có thể thêm bất kỳ số lượng phần tử nào và ràng buộc ng-click sự kiện đối với họ. Chúng sẽ hoạt động ra khỏi hộp, vì được phân tích cú pháp với góc cạnh. addValues của bạn bây giờ hàm chỉ cần sử dụng vm.fields để thực sự thêm các giá trị vào cơ sở dữ liệu.