5

有一个锁定和解锁功能，在 html 中表示为

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

和

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

解锁/锁定实际上是一个 REST API 调用

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

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

如何在 angular.js 中的两种状态之间切换？我的意思是当执行锁定并成功时，第一个选项应该隐藏，而解锁按钮应该可见。

selectedUser.enabled

返回1解锁和0锁定。

4

1 回答 1

20

只需使用一个li，并将类设置为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();
}

更新： Angular 1.1.5 增加了对三元运算符的支持，所以上面可以重写为：

{{ selectedUser.enabled ? 'Lock' : 'Unlock' }}
于 2013-04-14T02:46:43.333 回答