How to disable/enable sorting while editing in Angularjs - angularjs

Question

I have a editTable like this:
<tr ng-repeat='guest in guestList | orderBy:orderByField:reverseSort'>
<td><span ng-show='!guest.isedit'>{{guest.firstname}}</span><span ng-show='guest.isedit'><input type="text" ng-model='guest.firstname'/></span></td>
<td><span ng-show='!guest.isedit'>mode_edit</i></span><span ng-show='guest.isedit'><button ng-click='contactUpdate(guest)'>OK</button></span></td>
</tr>
in my controller:
$scope.editGuest = function(guest){
delete $scope.orderByField;
guest.isedit = true;
};
$scope.contactUpdate = function(guest){
//Save the change then put the order back to re-order the table
$scope.orderByField = 'firstname';
}
As you can see, this is a editable table, if I click edit, the table becomes editable. I want to disable the sort when editing, until user finish editing and hit the OK button(Which already saved in the server), then I will re-order with new data. The problem is for the first time I fire editGuest(guest),it will still jump. Is there any way I can achieve this?

Answer 1

You need to have a different ng-model on your input box like this :
<tr ng-repeat='guest in guestList | orderBy:orderByField:reverseSort'>
<td>
<span ng-show='!guest.isedit'>{{guest.firstname}}</span>
<span ng-show='guest.isedit'><input type="text" value="{{ guest.firstname }}" ng-model='firstname'/></span>//I have set the value to the guest's firstname to default the name when the input box becomes active. You can also use ng-init to achieve it.
</td>
<td>
<span ng-show='!guest.isedit'>mode_edit</i></span>
<span ng-show='guest.isedit'><button ng-click='contactUpdate(firstname)'>OK</button></span></td>
</tr>
In your Controller :
$scope.contactUpdate(guest, name){
guest.firstname = name;
name = '';//EDIT
}

Answer 2

You need to remove binding first for this.
Create clone of guestList object and do the editing operation on it.
once it is done assign the clone object back to guestList.
e.g.
var dummyGuestList = angular.copy(guestList)
//some operation on dummyGuestList ;
guestList = dummyGuestList //assign bacl again