有一个锁定和解锁功能,在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
。
最佳答案
只需使用一个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' }}
关于javascript - 在 angular.js 中切换类和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15995188/