Question

我有一个类似于excel的UI，用户可以在其中更改他想要的行数据。目前我正在使用ng-repeat来显示从mongoDB获取后的现有数据。这个数据是一个Json对象数组，因此ng-repeat工作正常。现在我想要一个保存按钮，单击该按钮，应保存所有编辑。我的问题是如何维护或知道哪些行已被更改？我可以在db中发送整个数组并进行更新，但是当行数很大而且只有一行的数据发生了变化时，会产生不必要的开销。所以让我知道如何优化它。

提前致谢

Answer 1

将ng-change事件添加到可以编辑值的字段中。

在ng-change上，在'obj in objects'中设置一个新键'modified：true'。

这样的事情：

<div ng-repeat="row in rows track by $index">
    <input type="text" ng-change="markAsChanged($index)" ng-model="row.textValue">
</div>

你的JS：

$scope.markAsChanged = function(index) {
    $scope.rows[index].changed = true;
}

然后，您的更新功能可以迭代所有行并将更改的行发送到Web服务进行更新，而不是全部发送。

Answer 2

＆＃13;

$scope.rowsChanged = [];

$scope.Changed = function(row) {
  $scope.rowsChanged.push(row);

}

＆＃13;

<div ng-repeat="row in rows track by $index">
  <input type="text" ng-change="Changed(row)" ng-model="row.textValue">
</div>

＆＃13;

希望有所帮助......

Answer 3

这可以通过维护一个包含已更改的所有行的索引的数组来实现。单击“保存”按钮时，此阵列将需要迭代（对于已更改的行）。当用户只是单击某一行或更改数组中的任何输入时，可以随时将新的$ index推送到此数组。 HTML：

<div ng-repeat="row in rows track by $index">
    <input type="text" ng-change="markAsChanged($index)" ng-model="row.textValue">
</div>

控制器：

var listOfChangedRows = [];
$scope.markAsChanged = function(index){
if(listOfChangedRows.indexOf(index)==-1)
{
listOfChangedRows.push(index);
}
}

//保存按钮单击

$scope.saveEditedRows = function(){
var updatedItems = [];
for(var i=0;i<listOfChangedRows.length;i++)
{
updatedItems.push($scope.rows[i]);
}
//Now send the updatedItems array to web service
}

使用ng-repeat时如何仅更新特定行

3 个答案: