Angular - 增长的表单的数据绑定

Question

我尝试使用数据绑定创建一个用户可以添加项目的表单;他们可以点击一个按钮添加另一个文本字段（在这个例子中，它是＆＃34;加＆＃34;按钮）。这是一个截图：

我现在已经开始工作了，所以当用户点击按钮时会出现更多的列表项，但是我找不到一个简洁的解决方案来解决如何让每个form-element绑定到一个单独的指令在模型中（理论上在$scope.form中的某种数组中）。所以现在，每个指令文本区域总是包含相同的文本（正如预期的那样，这就是问题）。

这是我的观看代码（用玉，但应该是可读的）：

 ol
    li( ng-repeat='instruction in form.instructions' )
       input( name='instruction[]' type='text' ng-model='form.instructions.text' )
    | <br>
    input( type='button' value='+' ng-click='addInstr()' )

这是我的控制器代码。

formControllers.controller('new-instruction-set-ctrl', function ($scope, $http) {
   $scope.form = $scope.form || {};
   $scope.form.instructions = [{}];

   $scope.addInstr = function() {
      $scope.form.instructions.push({});
   };
});

Answer 1

这最终对我有用。查看Plunker中的实时演示。

查看：

li( ng-repeat='instruction in form.instructions' )
   input( name='instruction[]' type='text' ng-model='form.instructions[$index].text')

我根本不需要改变我的控制器。

$index由ng-repeat自动提供。