Angular Inline Edit Tabelle Singleton

Question

Ich versuche, Inline-Bearbeitung für eine Tabelle zu erstellen (ähnlich angular-xeditable), aber ich möchte nur nur eine Zeile gleichzeitig bearbeitet werden können. Momentan können Sie eine beliebige Anzahl von Zeilen im Bearbeitungsmodus haben.

Optionen

1. eine Liste von Zeilen im Bearbeitungsmodus halten, und sobald eine neue Zeile bearbeitet werden soll, wird ausgewählt, Schleife durch die Liste und gewaltsam beendet aus Bearbeitungsmodus setzte Anfrage Zeile im Bearbeitungsmodus und fügen Sie sie zur Liste hinzu. Dies erlaubt im Wesentlichen höchstens eine Zeile in der Liste zu sein, was dazu führt, dass jeweils eine Zeile editierbar ist. Aber ich zeige nicht, wie man die Zeilen aus dem Bearbeitungsmodus herausholt.

2. Es gibt eine Abbrechen-Schaltfläche, die den Bearbeitungsmodus verlässt. Verwenden Sie also jquery (oder angular.element), um eine Liste aller Abbruchschaltflächen zu erhalten und pragmatisch auf sie zu klicken - wiederum mit dem gewaltsamen Verlassen von Zeilen im Bearbeitungsmodus, aber das könnte die Geschwindigkeit für eine große Tabelle verlangsamen, da auf Abbrechen geklickt wird Zeilen, die nicht einmal im Bearbeitungsmodus sind.

<table class="table table-striped"> 
<thead> 
    <tr> 
    <th id="th-name">Name</th> 
    <th id="th-age">Age</th> 
    <th id="th-actions">Actions</th> 
    </tr> 
</thead> 
<tr ng-repeat="contact in model.contacts"> 
    <td> 
    <span ng-show="edit != true">{{contact.name}}</span> 
    <input ng-show="edit" type="text" ng-model="model.selected.name" class="form-control" placeholder="Name"> 
    </td> 
    <td> 
    <span ng-show="edit != true">{{contact.age}}</span> 
    <input ng-show="edit" type="text" ng-model="model.selected.age" class="form-control" placeholder="Name"></td> 
    <td> 
    <button ng-show="edit != true" id="table-edit" ng-click="edit = true; editContact(contact)" uib-tooltip="Delete" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-fw fa-pencil"></i></button> 
    <button ng-show="edit" id="table-save" ng-click="edit = false; saveContact($index)" uib-tooltip="Delete" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-fw fa-floppy-o"></i></button> 
    <button ng-show="edit" id="table-cancel" ng-click="edit = false; reset()" uib-tooltip="Delete" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-fw fa-trash"></i></button> 
    </td> 
</tr> 
</table> 

ist hier ein Plunker Demo (alle Zeilen können in den Bearbeitungsmodus sein): Plnkr Demo `

Hier ist ein funktionierendes Demo von dem, was ich erreichen bin zu wollen, aber es ist Vorlagen . Es ruft getTemplate zu oft nach meinem Geschmack auf (ruft es jedes Mal auf, wenn ein Digest ausgeführt wird - Klicken auf Schaltflächen, Tippen, Anzeigen von Tooltip). Working Demo (Using templates)

Answer 1

Ich konnte das gewünschte Ergebnis erhalten, indem die editContact Aktualisierung und Reset-Funktionen auf die folgenden:

$scope.editContact = function(contact, event) { 
    // Nothing first time, but will have an element second time 
    $timeout(function() { 
    // Click the element and remove the class since it is not in edit mode anymore 
    angular.element('.row-edit-mode').triggerHandler('click'); 
    angular.element('.row-edit-mode').removeClass('row-edit-mode'); 

    // If it is not a button, then it is the fa-icon, so get its parent, which is a button 
    var eventElement = angular.element(event.target).is('button') ? event.target : event.target.parentNode; 
    // Find it's sibling with given id, and add a class to it 
    angular.element(eventElement).siblings("#table-cancel").addClass('row-edit-mode') 

    $scope.model.selected = angular.copy(contact); 
    }); 
}; 

$scope.reset = function() { 
    // Remove class on cancel 
    angular.element('.row-edit-mode').removeClass('row-edit-mode'); 
    $scope.model.selected = {}; 
}; 

http://plnkr.co/edit/vAACyxv2bE0li5muefsQ?p=preview

Ich sehe immer noch einen leichten flackern zwischen dem Schalter, also, wenn jemand Vorschläge hat, um es glatter zu machen, werde ich es wirklich schätzen.

Wenn ich keine anderen Antworten sehe, die das gewünschte Ergebnis für ein paar Tage erreichen, werde ich diese Antwort als akzeptiert markieren. Vielen Dank an alle, die Hilfe angeboten haben!

Answer 2

Sie können den Index des ng-Wiederholungs-Modus Ihre editContact Funktion wie diese die $index Variable (bereits in den ng-Repeat-Betrieb gebaut) mit Pass:

<button class="edit-btn" ng-show="edit != true" id="table-edit" ng-click="edit = true; editContact(contact, $index);" uib-tooltip="Delete" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-fw fa-pencil"></i></button> 

Beachten Sie, dass ich auch gab dem Button einen Klassennamen !!

Dann können Sie in Ihrer app.js-Datei die Anzeige der anderen Schaltflächen auf none einstellen, wenn eine Schaltfläche zum Bearbeiten ausgelöst wird. Dann, wenn die Bearbeitung gespeichert wird, die Anzeige auf Block:

var eles = document.getElementsByClassName('edit-btn'); 

$scope.editContact = function (contact, ind) { 

    $scope.model.selected = angular.copy(contact); 

    //remove display of other buttons 
    for(var i = 0; i < eles.length; i++){ 
     if(i != ind){ 
     eles[i].style.display = "none"; 
     } 
    } 

}; 

$scope.saveContact = function (idx) { 
    console.log("Saving contact"); 
    $scope.model.contacts[idx] = angular.copy($scope.model.selected); 

    //redo display of all buttons 
    for(var i = 0; i < eles.length; i++){ 
     eles[i].style.display = "block"; 
    } 

    $scope.reset(); 
}; 

Sie können innerhalb der editContact Taste sehen, dass die ind Variable der Index der aktuellen Schaltfläche Bearbeiten ist, die angeklickt wird. Hier

ist ein Plunker: http://plnkr.co/edit/N9EKErLJkFR5TwEzImNP?p=preview