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