angular js ng-class shows expression as class instead of processing it

Question

I'm trying to make highlighted menu items by using angular js. I've read this question and tried implementing the anwser, but instead of angular evaluating the expression, it just shows it as the class name. I don't know what's going on.

I have the menu items listed as JSON, and the iterate trough it with ng-repeat. Once the list items are created, I want the angular to add a class of 'active', if the location url is the same as the link.href attribute of a menu item (it's a json attribute, not the html one).

Here's the relevant html:

<div class="header" ng-controller="NavbarController">
      <ul>
         <li ng-repeat="link in menu" ng-class="{ active: isActive({{ link.href }}) }"><a ng-href="{{ link.href }}">{{ link.item }}</a>
    </li>
      </ul>
    </div>

and my controller:

.controller('NavbarController', function ($scope, $location) {

        // navbar links
        $scope.menu = [
            {
                item: 'PTC-Testers',
                href: '#/PTC-Testers'
            },
            {
                item: 'articles',
                href: '#/articles'
            },
            {
                item: 'PTC sites',
                href: '#/sites'
            },
            {
                item: 'account reviews',
                href: '#/account_reviews'
            },
            {
                item: 'forum',
                href: '#/forum'
            },
            {
                item: 'contact us',
                href: '#/contact'
            },
            {
                item: 'login',
                href: '#/login'
            }
        ]; // end $scope.menu

        $scope.isActive = function (viewLocation) { 
            return viewLocation === $location.path();
        };


    });

This is the navbar part of a bigger project, and I tried only inserting the relevant code. If you need further info to understand the question properly, please let me know.

ng-class="{active : isActive(link.href)"> should be ng-class="{active : isActive(link.href)}">, you miss the closing curly bracket. — Joy
– Joy, Commented Aug 13, 2015 at 9:08
added the closing curly bracket, still the same problem. Updated main code to ng-class="{ active: isActive({{ link.href }}) }" and now the html output looks like this: ng-class="{ active: isActive(#/PTC-Testers) }" — Miha Šušteršič
– Miha Šušteršič, Commented Aug 13, 2015 at 9:21
yeh I did and the output is still the same: ng-class="{active : isActive(link.href)}". When I put link.href in double curly brackets, it passes the attribute correctly but ignores the function — Miha Šušteršič
– Miha Šušteršič, Commented Aug 13, 2015 at 9:23
Then put the code alive on JSFiddle/Plunker. Somewhere else is wrong. — Joy
– Joy, Commented Aug 13, 2015 at 9:24

Deepak Banka · Accepted Answer · 2015-08-13 09:20:23Z

3

It should be ng-class="{'active' : isActive(link.href)}" You didn't end the curly brace in ng-class and its better to put class name inside quotes

answered Aug 13, 2015 at 9:20

Deepak Banka

5991 gold badge7 silver badges24 bronze badges

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

5 Comments

Miha Šušteršič Over a year ago

added the closing curly bracket, still the same problem. Updated main code to ng-class="{ active: isActive({{ link.href }}) }" and now the html output looks like this: ng-class="{ active: isActive(#/PTC-Testers) }"

Deepak Banka Over a year ago

use this ng-class="{'active' : isActive(link.href)}" . Put the word active inside quotes

Miha Šušteršič Over a year ago

just tried it, result is still the same, only now active is in single quotes in the output

Miha Šušteršič Over a year ago

the problem was that the list tags were generated from an JSON object defined in my controller. After I've written the list items as separate objects directly into my html markup, your code started working as intended. If you could insert this into your answer, or maybe even explain why this happens I'd be happy to accept it. Thanks for the help

Deepak Banka Over a year ago

No problem at all...happy that your code started working :)

Collectives™ on Stack Overflow

angular js ng-class shows expression as class instead of processing it

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related