2013-07-23 2 views
0

У меня была интересная проблема сегодня с AngularJS, который я думал, что я бы разместить:Обновление AngularJS Модель таблицы вставляет новую ячейку и удаляет другой

В моем приложении у меня есть модель, с которой я создаю таблицу HTML с использованием ng- Кроме того, у меня есть поле ввода, которое привязано к другой модели, и я зарегистрировал функцию часов для этой модели. Когда я вводю какой-либо текст в поле ввода, функция записывает этот текст в текущую выделенную ячейку таблицы.

Как только функция завершилась, произошло что-то проводное. Вместо обновления значения выбранной ячейки новый был вставлен в текущую позицию, и ячейки были сдвинуты вправо, и последняя ячейка была удалена из строки. Очевидно, я ожидал, что ячейки останутся, что их текущая позиция и только дочерние элементы были обновлены.

Вот краткий пример моего кода. Модель:

//The model is initialized with empty strings, later the input is supplied by the user 
$scope.master.rows = [["", "", ""], ["", "", ""], ["", "", ""]]; 

HTML фрагмент:

<table ng-model="master.rows"> 
    <tr ng-repeat="row in master.rows"> 
     <td ng-repeat="col in row" 
      ng-click="master.click($event.target)">{{ col }}</td> 
    </tr> 
</table> 

Когда функция щелчка выполняются, текущая ячейка устанавливаются в объеме, что функция часов может извлечь й и индекс у от него и использовать его для обновления модели:

$scope.$watch("master.attributes", function (value) { 
    var x = $scope.master.current[0].cellIndex; 
    var y = $scope.master.current[0].parentNode.rowIndex; 
    $scope.master.rows[y][x] = value; 
}); 

ответ

0

Оказалось, что это поведение, потому что я писал непосредственно объекту модели. Поэтому я немного изменил модель, чтобы содержать объекты, и вместо этого я написал значение для элемента-объекта. Новая модель выглядит следующим образом:

$scope.master.rows = [[{value: ""}, {value: ""}, {value: ""}], 
         [{value: ""}, {value: ""}, {value: ""}], 
         [{value: ""}, {value: ""}, {value: ""}] 
        ]; 

В HTML сниппет я изменил выражение:

<td ng-repeat="col in row" ng-click="master.click($event.target)">{{ col.value }}</td> 

В функции часов:

$scope.master.rows[y][x].value = value; 
Смежные вопросы