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, Aug 13 '15 at 09: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č, Aug 13 '15 at 09: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č, Aug 13 '15 at 09:23
Then put the code alive on JSFiddle/Plunker. Somewhere else is wrong. — Joy, Aug 13 '15 at 09:24
I tried setting up JSfiddle but I keep getting all the dependencies wrong, and it won't work. I know it's annoying but here's a github link to the project: https://github.com/Shooshte/PTC-Testers. The relevant files are index.html and navbar.js — Miha Šušteršič, Aug 13 '15 at 09:35

score 3 · Accepted Answer · answered Aug 13 '15 at 09:20

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 '15 at 09:20

Deepak Banka

591
1
6
24

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č Aug 13 '15 at 09:21
use this ng-class="{'active' : isActive(link.href)}" . Put the word active inside quotes – Deepak Banka Aug 13 '15 at 09:25
just tried it, result is still the same, only now active is in single quotes in the output – Miha Šušteršič Aug 13 '15 at 09:30
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 – Miha Šušteršič Aug 17 '15 at 12:20
No problem at all...happy that your code started working :) – Deepak Banka Aug 18 '15 at 07:28

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

1 Answers1