Toggle-Klasse und der text in angular.js

Gibt es eine Sperre und entsperren Funktionen, die in html wird vertreten durch

<li><a ng:click="lock(selectedUser)"><i class="icon-lock icon"></i>Lock</a></li>

und

<li><a ng:click="unlock(selectedUser)"><i class="icon-unlock icon"></i>UnLock</a></li>

Unlock/Lock ist eigentlich eine REST API-Aufruf

$scope.unlock = function(user){
     user.$unlock();
}

$scope.lock = function(user){
     user.$lock();
}

Wie kann ich Umschalten zwischen den beiden Staaten in angular.js? Ich meine, wenn eine Sperre erfolgt ist und erfolgreich war die erste option sollte versteckt werden, während die Schaltfläche "entsperren", sollten sichtbar werden.

selectedUser.enabled

zurück 1 für unlocked und 0 für gesperrt.

InformationsquelleAutor Upvote | 2013-04-14
  1. 20

    Einfach ein li, und legen Sie die Klasse mit ng:class:

    HTML:

    <li>
  <a ng:click="toggleLock(selectedUser)">
    <i class="icon" ng:class="{ 'icon-lock': selectedUser.enabled, 'icon-unlock': ! selectedUser.enabled }"></i>
    {{ selectedUser.enabled && 'Lock' || 'Unlock' }}
  </a>
</li>

    Javascript:

    $scope.toggleLock = function (user) {
     user.enabled ? user.$lock() : user.$unlock();
}

    Update: Winkel 1.1.5 Unterstützung für ternäre Operatoren, so dass die oben neu geschrieben werden kann als:

    {{ selectedUser.enabled ? 'Lock' : 'Unlock' }}
    • Sry, meine Frage war unklar, bearbeitete ich es.
    • Ich änderte meine Antwort zu reflektieren, Ihre Frage geklärt.
    • Danke, das funktioniert. Kann ich den text ändern, der "Lock" auf "Unlock" - die gleiche Weise?
    • Super!!!! Danke 🙂
    InformationsquelleAutor Joseph Silber
Schreibe einen Kommentar