current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 15 down vote favorite
5

I am trying to work how to add a class with ngClick. I have uploaded up my code onto plunker Click here. Looking at the angular documentation i can't figure out the exact way it should be done. Below is a snippet of my code. Can someone guide me in the right direction

 <div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div>

Controller

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });
share|improve this question
    
not clear from demo or explnation what objective is. Seem to be trying to toggle a menu, but why aare you only toggling menu link in demo? –  charlietfl Dec 8 '13 at 23:14

3 Answers 3

up vote 18 down vote accepted

You just need to bind a variable into the directive "ng-class" and change it from the controller. Here is a example:

<html ng-app="app">
  <head>
    <title>example</title>
    <style type="text/css">

      .red{
        color:red;
      }
      .blue{
        color:blue;
      }

    </style>
  </head>
  <body ng-controller="con">
    <div ng-class="class">{{class}}</div>
    <button ng-click="changeClass()">Change Class</button>

    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript">
      var app = angular.module("app",[]);

      app.controller("con",function($scope){

        $scope.class = "red";

        $scope.changeClass = function(){
          if ($scope.class === "red")
            $scope.class = "blue";
          else
            $scope.class = "red";
        };
      });
    </script>
  </body>
</html>

Here is the example working on jsFiddle

share|improve this answer
6  
class is a reserved word, use className instead, YUI compiler will fail to minify this. –  Orlando Mar 26 '14 at 21:19
3  
What about if I want use this code for more than one div in the same view? this code actuali change class for all div, how I can apply class only to the selected clicked item –  xzegga Apr 24 '14 at 4:44
up vote 36 down vote

I want to add or remove "active" class in my code dynamically on ng-click, here what i have done.

<ul ng-init="selectedTab = 'users'">
<li ng-class="{'active':selectedTab === 'users'}" ng-click="selectedTab = 'users'"><a href="#users" >Users</a></li>
<li ng-class="{'active':selectedTab === 'items'}" ng-click="selectedTab = 'items'"><a href="#items" >Items</a></li>
</ul>
share|improve this answer
1  
+1 for the ng-init. Thank you –  mjwatts Jul 2 '14 at 9:52
1  
Much more elegant solution. –  iLoveUnicorns Aug 19 '14 at 4:01
3  
-1 for ng-init. According to AngularJS docs - The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope. –  Mike Grabowski Sep 22 '14 at 14:42
    
I just avoiding the controller part "here", as this is just for showing the basic functionality of how to do that... –  cutedevil086 Dec 8 '14 at 18:07
    
Thanks, it helps –  Yoo Dec 13 '14 at 3:56
up vote 1 down vote

You have it exactly right, all you have to do is set selectedIndex in your ng-click.

ng-click="selectedIndex = 1"

Here is how I implemented a set of buttons that change the ng-view, and highlights the button of the currently selected view.

<div id="sidebar" ng-init="partial = 'main'">
    <div class="routeBtn" ng-class="{selected:partial=='main'}" ng-click="router('main')"><span>Main</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view1'}" ng-click="router('view1')"><span>Resume</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view2'}" ng-click="router('view2')"><span>Code</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view3'}" ng-click="router('view3')"><span>Game</span></div>
  </div>

and this in my controller.

$scope.router = function(endpoint) {
    $location.path("/" + ($scope.partial = endpoint));
};
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.