Chuyển đổi và văn bản trong angular.js

Question

Có một khóa và mở khóa chức năng, mà trong html được đại diện bởi

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

và

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

Mở khóa/Khóa là acutally một cuộc gọi API REST

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

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

Làm cách nào để chuyển đổi giữa hai trạng thái trong angular.js? Ý tôi là khi khóa được thực hiện và thành công, tùy chọn đầu tiên sẽ bị ẩn trong khi nút mở khóa sẽ hiển thị.

selectedUser.enabled 

trả về 1 để mở khóa và 0 bị khóa.

Answer 1

Chỉ cần sử dụng một li, và thiết lập các lớp học với 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(); 
} 

---

Cập nhật: 1.1.5 góc thêm hỗ trợ cho các nhà khai thác ternary, vì vậy trên có thể được viết lại như sau:

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