Question

有一个锁定和解锁功能，在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表示已锁定。

Answer 1

只需使用一个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' }}

在angular.js中切换类和文本

1 个答案: