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

StackOverflow https://stackoverflow.com/questions/18744717

  •  28-06-2022
  •  | 
  •  

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?

Was it helpful?

Solution

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}"

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top