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

时间:2016-06-06 01:40:14

标签: javascript angularjs mongodb angularjs-ng-repeat ng-repeat

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

提前致谢

3 个答案:

答案 0 :(得分: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服务进行更新,而不是全部发送。

答案 1 :(得分:1)

&#13;
&#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;
&#13;
&#13;

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

答案 2 :(得分:0)

这可以通过维护一个包含已更改的所有行的索引的数组来实现。单击“保存”按钮时,此阵列将需要迭代(对于已更改的行)。 当用户只是单击某一行或更改数组中的任何输入时,可以随时将新的$ 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
}