У меня странная проблема с динамическим связыванием модели в 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/

1
Siper 16 Дек 2015 в 11:19

3 ответа

Лучший ответ

Вы ошиблись в создании 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);
0
suvroc 16 Дек 2015 в 08:54

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

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

1
dfsq 16 Дек 2015 в 08:53

Вы связываете каждое поле в ng-model="column.defaults[i]", это означает, что каждое поле, присутствующее в массиве columns, будет привязано к одному и тому же свойству модели ... например: оба {{X2 }} и column.bar связываются с columnt.default[i] ...

Вы можете исправить это, связав текстовое поле с переменной column, например:

<td ng-repeat="column in columns">
        <input type="text" ng-model="column.foo" class="form-control">
</td>
0
Hitmands 16 Дек 2015 в 08:56