Wie deaktivieren/aktivieren Sortierung während in AngularJS Bearbeitung

Question

ich editTable wie diese:

<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 meinem 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'; 
} 

Wie Sie sehen können, ist dies eine editierbare Tabelle, wenn Ich klicke auf Bearbeiten, die Tabelle wird editierbar. Ich möchte die Sortierung beim Bearbeiten deaktivieren, bis der Benutzer die Bearbeitung beendet und die OK-Taste drückt (welche bereits auf dem Server gespeichert ist), dann werde ich mit neuen Daten neu bestellen. Das Problem ist, dass ich zum ersten Mal fire editGuest (Gast), es wird immer noch springen. Kann ich das irgendwie erreichen?

Answer 1

Sie benötigen wie dies ein anderes ng-Modell auf dem Eingabefeld haben:

<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 Ihrem Controller:

$scope.contactUpdate(guest, name){ 
    guest.firstname = name; 
    name = '';//EDIT 
} 

Answer 2

Sie müssen zuerst die Bindung entfernen.

Erstellen Sie einen Klon von guestList Objekt und führen Sie die Bearbeitung darauf durch.

Sobald das erledigt ist, weisen Sie das Klonobjekt wieder guestList zu.

z.B.

var dummyGuestList = angular.copy (Gästeliste)

// Operationen mit dummyGuestList;

guestList = dummyGuestList //assign bacl again