Question

我对angularjs比较新。我尝试使用ng-class将bootstrap nav-tab设置为活动状态，如果它是当前选择的那个。

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

在下面的代码段中，category.id = 1456和currentTab = 1456但由于某种原因，它仍然具有无效的类集。根据我的理解，if-then语句如果（1456 == 1456）class =＆＃39; active＆＃39 ;;有没有人知道发生了什么或者更好的方式我可以做到这一点让它发挥作用？任何建议将不胜感激。感谢。

Snippet of my html that is not working

Answer 1

很想发表评论，但我还没有声誉。

出于好奇，您是否尝试过三重等号？ [[category.id]] === [[currentTab]] ? 'active' : 'innactive'"

并且如果使它'==='仍然不起作用意味着它们两者都是不同类型的。如果是这种情况，那么你可能想要通过类似parseInt（）

来使它们成为int

Answer 2

此示例代码有效，希望有所帮助：

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>

angular.js ng-class if-then语句不起作用

2 个答案: