Question

我对Angular JS中的模型动态绑定有一个奇怪的问题。

<tr ng-repeat="i in [].constructor( 5 ) track by $index">
  <td ng-repeat="column in columns">
    <input type="text" ng-model="column.defaults[i]" class="form-control">
  </td>
</tr>

我使用以下方式定义列：

  $scope.addColumn = function() {
    if(!$scope.field_column_name) return;

    if(!$scope.columns) {
      $scope.columns = []
    }
    $scope.columns.push( {
      name: $scope.field_column_name,
      defaults: $scope.field_column_defaults
    });
    $scope.field_column_name = $scope.field_column_default = undefined;
  };

我的目标是为所有用户创建输入以存储用户添加的数据。问题是，因为所有输入看起来都是相同的模型（其中一个中添加的值也显示在其他输入中）。为什么呢？

JSFiddle：http://jsfiddle.net/tz6fsz1o/5/

Answer 1

我认为应该是这样的：

<tr ng-repeat="i in [].constructor(5)" ng-init="outerIndex = $index">
    <td ng-repeat="column in columns">
        <input type="text" ng-model="columns[$index].defaults[outerIndex]" class="form-control">
    </td>
</tr>

注意您需要将外部循环$index存储到辅助变量中，以便在内部循环中访问它。

演示： http://jsfiddle.net/tz6fsz1o/7/

Answer 2

您在创建rows_array

时出错

尝试http://jsfiddle.net/tz6fsz1o/6/

$scope.$watch('rows', function(){
    $scope.rows_array = [];
    for(var i=0;i<$scope.rows;i++){
        $scope.rows_array.push(i);
    }
  }, true);

Answer 3

你是绑定 ng-model="column.defaults[i]"上的每个字段，这意味着columns数组中的每个字段都会绑定在同一个模型属性上...例如：两者column.foo和column.bar绑定到columnt.default[i] ...

您可以修复它绑定column变量上的文本字段，例如：

<td ng-repeat="column in columns">
        <input type="text" ng-model="column.foo" class="form-control">
</td>

动态重复模型

3 个答案: