current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
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 0 down vote favorite

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
add comment

2 Answers

up vote 2 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
add comment
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
add comment

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.