Модель в динамическом повторении

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

Вы ошибку при создании 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 2

Я думаю, что это должно быть так:

<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 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>