How to disable/enable sorting while editing in 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'><a href="javascript:void(0)" ng-click='editGuest(guest)'><i class="material-icons">mode_edit</i></a></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?

Bala Abhinav · Accepted Answer · 2017-01-19 06:19:48Z

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'><a href="javascript:void(0)" ng-click='editGuest(guest)'><i class="material-icons">mode_edit</i></a></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
}

edited Jan 19, 2017 at 6:19

answered Jan 19, 2017 at 5:57

Bala Abhinav

1,3481 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shyammakwana.me Over a year ago

I think firstname is not in guestList so it will be same for all <tr>'s. Don't you think that this should be unique for each row ?

shyammakwana.me Over a year ago

Otherwise you have to pass guest in contactUpdate function and after saving clear firstname value.

Bala Abhinav Over a year ago

@shyammakwana.me yup you're right. I am passing the guest in the update function so that shouldnt be an issue. I should clear the firstname after setting it

RIYAJ KHAN · Accepted Answer · 2017-01-19 05:49:38Z

0

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

answered Jan 19, 2017 at 5:49

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to disable/enable sorting while editing in Angularjs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related