Toggle class and text in angular.js

Question

There is a lock and unlock functionality, which in html is represented by

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

and

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

Unlock/Lock is acutally a REST API call

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

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

How can I toggle between the two states in angular.js? I mean when a lock is performed and is successfull the first option should be hidden while the unlock button should get visible.

selectedUser.enabled

returns 1 for unlocked and 0 for locked.

Joseph Silber · Accepted Answer · 2013-09-01 04:43:30Z

20

Just use one li, and set the class with 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 added support for ternary operators, so the above can be re-written as:

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

edited Sep 1, 2013 at 4:43

answered Apr 14, 2013 at 2:46

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joseph Silber Over a year ago

@artworkadシ - I changed my answer to reflect your clarified question.

DarkLeafyGreen Over a year ago

Thank you that works. Can I change the text "Lock" to "Unlock" the same way?

Collectives™ on Stack Overflow

Toggle class and text in angular.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related