how to toggle class in angular js on ng-click

Question

I am trying to toggle a class on click, please find my below code.

<li class="dropdown" data-ng-class="sign-open">
  <a href="" class="dropdown-toggle" data-ng-click="signToogle()">Sign In <b class="caret"></b></a>
  <div class="dropdown-menu" style="padding: 15px;">
    <form action="#" method="post" accept-charset="UTF-8" class="form-menu">
      <input id="user_username" type="text" name="user[username]" size="33" placeholder="Username">
      <input id="user_password" type="password" name="user[password]" size="33" placeholder="Password">
      <label class="checkbox muted hidden-tablet">
        <input type="checkbox">Remember Me</label>
      <input class="btn span3" type="submit" name="commit" value="Sign In">
    </form>

  </div>
</li>


//sign in show-hide
$scope.signToogle = function () {
    if ($scope.sign-open === "")
        $scope.class = "open";
    else
        $scope.class = "";
}

this js funciton will addclass open so if ul has open class as it's parent then it will be visible. But don't know how can I make that if click once then true and class append and if again clicked statement false and class will be removed.

you can check using the condition of class. like this `if($scope.class ==='open'){ //remove class....}' — Anita
– Anita, Commented Apr 23, 2015 at 11:41

Nikhil Baliga · Accepted Answer · 2015-04-23 11:43:50Z

5

You can use ng-class

<div ng-class="{active: is_active}">Some div</div>

<button ng-click="is_active = !is_active" ng-init="is_active=false">Click to toggle</button>

Set or reset $scope.is_active when you click

edited Apr 23, 2015 at 11:43

answered Apr 23, 2015 at 11:41

Nikhil Baliga

1,35113 silver badges20 bronze badges

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

1 Comment

nirmal Over a year ago

what about js function side code, can you please help in it as well. and will it add class active, if i want to add class open should i change it to "{open: is_active}"

amd · Accepted Answer · 2015-04-23 12:39:53Z

2

var app = angular.module('app', []);

app.controller('Main', function($scope) {
  $scope.isOpen = false;
});

.item span {
  display: none;
}
.item.close span.show-on-close {
  display: block;
}
.item.open span.show-on-open {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">

  <div ng-controller="Main">
    <pre>isOpen: {{isOpen | json}}</pre>
    <span class="item" ng-class="{'open':isOpen, 'close':!isOpen}">
      <span class="show-on-open">open</span>
    <span class="show-on-close">close</span>
    </span>

    <button ng-click="isOpen = !isOpen">Toggle</button>
  </div>
</div>

NOTE: variable in JavaScript can't contains the dash character so rename your $scope.sign-open to $scope.signOpen

you don't even have to define a function in the controller, you can do it like this:

<span ng-class="{'open':!signOpen, '':signOpen}"></span>

on click handler <button ng-click="signOpen = !signOpen">toggle</button>

edited Apr 23, 2015 at 12:39

answered Apr 23, 2015 at 11:46

amd

21.7k6 gold badges54 silver badges71 bronze badges

3 Comments

nirmal Over a year ago

what about making it true and false on click

amd Over a year ago

so please consider accepting the answer, if it answers your question

nirmal Over a year ago

you are correct in your answer, but nikhil went for answer more fast, so upvote for you only is way for me to appreciate your good work.

Collectives™ on Stack Overflow

how to toggle class in angular js on ng-click

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related