Can you use variables with NG-CLASS active link with Angular?

Question

I want to use a loop to create my navigation Here is my code I keep getting an error saying it won't evaluate as a string? The code that I wrote is so that it will loop through the $scope.navigation and use that to write out the navigation so I don't have to write out each list and anchor tag?

  <!DOCTYPE html>
  <html ng-app="Sample">
    <head>
       <title>Sample Angular App</title>
       <script src="Scripts/basket.js"></script>
       <link rel="stylesheet" href="css/global.css"/>
       <script src="Scripts/angular.min.js"></script>
       <script src="controllers/main.js"></script>
       <script src="routes/route.js"></script>
  </head>
   <body>
     <div class="navigation" ng-controller="AppCtrl">
         <ul class="cf" >
            <li class="link {{link.name}}" ng-class="{{link.name + 'Active'}}" ng-repeat="link in navigation">
              <a href="{{link.route}}" ng-click="setActive($index)">{{link.name |      uppercase}}</a> 
            </li>
        </ul>
     </div>
     <div class="wrapper">
       <div ng-view>

       </div>
     </div>
   </body>
  </html>

My main js script file looks like this:

          function AppCtrl($scope) {

            $scope.navigation = [

                { name:"main", route:"#/"},
                { name:"edit", route:"#/edit" },
                { name: "save", route: "#/save" },
                { name: "settings", route: "#/settings" }

            ];

            $scope.currentPage = null;

            $scope.setCurrentPage = function (index) {

                $scope.currentPage = $scope.navigation[index];

            }

            $scope.setActive = function (index) {

                angular.forEach($scope.navigation, function (value, key) {

                   $scope[value.name + 'Active'] = "";

                });

             var active = $scope.navigation[index].name;

                $scope[active + 'Active'] = "active";


            }

        }

It keeps giving me an error saying that the {{link.name}} cannot be evaluated as a string but it is a string? Is there a way to loop through a $scope.navigation and get it to output the navigation without having to manually write it out and still add the setActive function? I am kind of new at working with angularjs. Is there a way to fix this issue or is it that doing things this way is not allowed in angular?

Where is link defined in your scope?

ravenlp
– ravenlp

2013-09-11 15:01:34 +00:00
Commented Sep 11, 2013 at 15:01 — ravenlp
– ravenlp, Commented Sep 11, 2013 at 15:01
Nevermind, I found it scrolling sidewise on the code

ravenlp
– ravenlp

2013-09-11 15:03:28 +00:00
Commented Sep 11, 2013 at 15:03 — ravenlp
– ravenlp, Commented Sep 11, 2013 at 15:03

dnc253 · Accepted Answer · 2013-09-11 15:27:25Z

7

There's a much better/easier way to accomplish setting a active CSS class. Just save a single value in your scope that holds the value of what is active. Something like this:

$scope.setActive = function (index) {    
  $scope.activeIndex = index;
};

Then ng-class allows you to give it an map where "the names of the properties whose values are truthy will be added as css classes to the element" (From http://docs.angularjs.org/api/ng.directive:ngClass).

So you can set the CSS class if the $index is the activeIndex:

ng-class="{active: $index == activeIndex}"

answered Sep 11, 2013 at 15:27

dnc253

40.4k41 gold badges145 silver badges160 bronze badges

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

4 Comments

Jesse Over a year ago

I don't understand it completely but it worked thank you so much for your help, I really like Angular js I am going to keep working with it. I really appreciate you taking the time to answer my question. I just learned Angular this week.

urban_raccoons Over a year ago

Please mark as as answered if this solution did in fact work for you.

Jesse Over a year ago

I have another question please? I am having difficulty sending it to my module, I scoped everything properly the controller is reading the scope but I can't access the setActive() function? is there a nested scope issue? I wanted to separate the click function from the ng-click and use it in the controller so when the page loads the active link is already highlighted.

dnc253 Over a year ago

If you want the active class applied on page load, you just need to set activeIndex to whatever index should be highlighted in the controller. Before anything calls setActive(), $scope.activeIndex is undefined. So, if you just put something like $scope.activeIndex = 0; in the controller, it will start at 0 and the first one will be highlighted.

Quentin Bontemps · Accepted Answer · 2015-07-20 12:04:03Z

2

I've tested the dnc253's solution. But it doesn't seems worked anymore.

I had to create a method like this:

$scope.isActive = function(index){
    return $scope.activeIndex === index;
};

And in html :

ng-class="{active: isActive($index)}"

This works fine.

edited Jul 20, 2015 at 12:04

answered Jul 20, 2015 at 10:10

Quentin Bontemps

315 bronze badges

Collectives™ on Stack Overflow

Can you use variables with NG-CLASS active link with Angular?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related