Toggle-Klasse und Text in Angularjs

Question

Es ist ein Sperren und Entsperren Funktionalität, die in HTML dargestellt wird, 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> 

Entsperren/Sperren ist acutally ein REST-API-Aufruf

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

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

Wie kann ich zwischen den beiden Zuständen in angular.js wechseln? Ich meine, wenn eine Sperre ausgeführt wird und erfolgreich ist, sollte die erste Option ausgeblendet werden, während die Entsperrungstaste sichtbar sein sollte.

selectedUser.enabled 

kehrt 1 für entriegelt und 0 für gesperrt.

Answer 1

Verwenden Sie einfach ein li, und stellen 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: Angular 1.1.5 Unterstützung für ternäre Operatoren, so kann die obige neu geschrieben werden als:

{{ selectedUser.enabled ? 'Lock' : 'Unlock' }}