How to update only specific rows when using ng-rep

问题:

I have a UI similar to excel, where the user can change the data in which ever row he wants. Currently i am using ng-repeat to display the existing data, after fetching from mongoDB. This data is an array of Json Objects , so ng-repeat works fine. Now i want to have a single save button, clicking which, all the edits should be saved. My question is how to maintain or know which rows have been changed ?? i can just send the whole array and update in the db, but when the number of rows is large and data of just one row has changed there will be an unnecessary overhead. so let me know how this can be optimised.

Thanks in advance

回答1:

Add an ng-change event to fields where they can edit the values.

On ng-change, set a new key 'modified: true' on 'obj in objects'.

Something like this:

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

And your JS:

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

Then your update function could iterate all rows and send changed rows to the webservice for updating instead of sending them all.

回答2:

$scope.rowsChanged = [];

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

}

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

Hope it helps..

回答3:

This thing can be achieved by maintaining an array which contain index for all the rows that has changed. On clicking on save button , an iteration will be required on this array (For rows which have changed). A new $index can be pushed to this array anytime when the user is just clicking on a row or on changing any input in the array. HTML:

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

Controller:

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

//Save button Clicked

$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
}