On click adding and removing classes in angularJs

Question

I want to remove active class from an li and add it to another li. I know how to do it with jQuery but I don't know how to make it work with AngularJS.

Here is my code :

$(document).ready(function() {

    // event to nav bar header
    $("ul.nav li").click(function() { 

        $("ul.nav li").removeClass("active");
        $(this).addClass("active");
    });
});

Demo Here

Please look at the ng-class documentation docs.angularjs.org/api/ng/directive/ngClass — user1334319
– user1334319, Commented Mar 9, 2015 at 11:52

DonJuwe · Accepted Answer · 2015-03-09 12:25:43Z

You can build up an array of your nav items in your scope and call a function which sets a variable to true if the respective string matches.

Furthermore, I suggest building your nav with ng-repeat based on this very array.

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

function MyCtrl($scope) {
  
    var navArr = [
        'home',
        'help',
        'admin'
    ];
    
    $scope.setNavActive = function(str) {
      console.log(str);
        angular.forEach(navArr, function(item) {
          console.log(item);
          $scope[item] = (str == item);
        });
    };
    
    $scope.home = true;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #6da54d;
}

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

<div ng-app="myApp" ng-controller="MyCtrl">
  <ul class="nav nav-pills pull-right mynavbar">
    <li ng-class="{active: home}" ng-click="setNavActive('home')"><a ng-href="#/">Home</a></li>
    <li ng-class="{active: help}" ng-click="setNavActive('help')"><a ng-href="#/help">Help</a></li>
    <li ng-class="{active: admin}" ng-click="setNavActive('admin')"><a ng-href="#/administration">Administration</a></li>
  </ul>
</div>

Thank you DonJuwe that works i didn't know that you have to use ng-class with angular

RustyShackleford · Accepted Answer · 2015-03-09 11:57:41Z

0

I like to use the ternary operator

ng-class="(clickedBoolean) ? 'active' : ''"

Just change clickedBoolean to whatever your click event is changing and your ng-class directive will act accordingly.

answered Mar 9, 2015 at 11:57

RustyShackleford

27.6k6 gold badges25 silver badges38 bronze badges

1 Comment

Miraage Over a year ago

Better use ng-class="{active: clickedBoolean}".

Collectives™ on Stack Overflow

On click adding and removing classes in angularJs

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related