angular.js ng-class if-then statement not working

Question

I'm relatively new to angularjs. I'm trying to use the ng-class to set a bootstrap nav-tab as active if it's the one that's currently selected.

            <ul class="nav nav-tabs nav-stacked nav-pills" role="tablist" ng-repeat="category in editor.categories">
                <li ng-model='value.[[category.id]]' ng-class="[[category.id]] == [[currentTab]] ? 'active' : 'innactive'">
                    <a class="btn-md" ng-click="changeTab([[category]])" href="">[[category.name]]</a>
                </li>
            </ul>

In the snippet below, category.id = 1456 and currentTab = 1456 but for some reason, it still has the innactive class set. From what I understand, the if-then statement would be like this if (1456 == 1456) class = 'active'; Does anyone have any idea of what's going on or a better way I could go about doing this to have it work? Any suggestions would be greatly appreciated. Thanks.

Snippet of my html that is not working

does === instead of == work?

Claies
– Claies

2015-03-22 02:06:33 +00:00
Commented Mar 22, 2015 at 2:06 — Claies
– Claies, Commented Mar 22, 2015 at 2:06
I just tried it and it's still getting the inactive class

Sloganho
– Sloganho

2015-03-22 02:08:32 +00:00
Commented Mar 22, 2015 at 2:08 — Sloganho
– Sloganho, Commented Mar 22, 2015 at 2:08

swlim · Accepted Answer · 2015-03-22 02:07:14Z

1

Would love a comment to ask this but I do not have the reputation yet.

Just out of curiosity, have you tried the triple equal signs?
[[category.id]] === [[currentTab]] ? 'active' : 'innactive'"

and if making it '===' still doesn't work meaning to say that the both of them are of different types. If that's the case then you might want to look into making them both int by something like parseInt()

answered Mar 22, 2015 at 2:07

swlim

4524 silver badges17 bronze badges

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

4 Comments

Sloganho Over a year ago

I just tried it and it's still getting the inactive class

swlim Over a year ago

I've just edited and updated the suggested answer. :) Just for the sake of checking, use typeof <value> to check both their data types.

Sloganho Over a year ago

Thank you! The category.id was actually a string because it was coming from JSON @SWLim

swlim Over a year ago

Oh ok! Glad that helped :) Always keep in mind that javascript can be a little too lenient, so it doesn't complain about comparing different types.

Greg Lafrance · Accepted Answer · 2015-03-22 02:19:01Z

This sample code works, hope it helps:

angular.module('myApp', [])
    .controller('myController', function ($scope) {
        $scope.currentTab = 1;
        $scope.editor = {
            "categories": [
                {"id": 1, "name": "cars"},
                {"id": 2, "name": "boats"},
                {"id": 3, "name": "planes"}
            ]
        };
    });

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <style>
        .active {
            color: green;
        }
        .innactive {
            color: lightgrey;
        }
    </style>
</head>
<body ng-controller="myController">
    <ul ng-repeat="category in editor.categories">
        <li ng-class="category.id == currentTab ? 'active' : 'innactive'">
            <a href="">{{category.name}}</a>
        </li>
    </ul>
    <script src="../angularjs/angularjs_1.2.5/angular.js"></script>
    <script src="test.js"></script>
</body>
</html>

Collectives™ on Stack Overflow

angular.js ng-class if-then statement not working

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