AngularJS动态输入值绑定到数组模型

Question

我想动态生成一个输入列表，并使用AngularJS + jQuery将它们的值绑定到模型的数组属性。

... 
<section ng-controller="MyController"> 
    <button ng-click="addInput">Add new field</button> 
    <section class="input-group"></section> 
</section> 

... 
$scope.model = { 
    'title': 'aaa', 
    'arr': [] 
}; 

$scope.instructionCount = 0; 

$scope.addInput = function() { 
    $model.arr.push(''); 
    $('.input-group').append(
     '<input type="text" 
     ng-bind="$scope.model.arr[' + ++$scope.instructionCount + ']"> 
    ); 
}; 

为什么不能正常工作？

Answer 1

首先，除非您完全理解jQuery在前端应用程序中的角色，否则我建议您将其从您的项目中删除，并在Angular way中使用Angular。

那么你应该使用ngRepeat是这样的：

var app = angular.module('demo', []); 
 
app.controller('MainController', function($scope) { 
 
    $scope.model = { 
 
     'title': 'aaa', 
 
     'arr': [] 
 
    }; 
 

 
    $scope.addField = function() { 
 
     $scope.model.arr.push(''); 
 
    }; 
 
});

<script src="https://code.angularjs.org/1.4.3/angular.js"></script> 
 
<div ng-app="demo" ng-controller="MainController"> 
 
    <section> 
 
     <button ng-click="addField()">Add new field</button> 
 
     <section class="input-group"> 
 
      <input type="text" ng-repeat="input in model.arr track by $index" ng-model="model.arr[$index]"> 
 
     </section> 
 
     <pre>{{model | json}}</pre> 
 
    </section> 
 
</div>