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

Question

我对 angularjs 比较陌生。我正在尝试使用 ng-class 将 bootstrap 导航选项卡设置为活动选项卡（如果它是当前选中的选项卡）。

            <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 但出于某种原因，它仍然设置了 innactive class。据我了解，if-then 语句将是这样的 if (1456 == 1456) class = 'active';有没有人知道发生了什么，或者我可以采取更好的方法来让它发挥作用？任何建议将不胜感激。谢谢

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 语句不工作

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

html

angularjs

twitter-bootstrap-3

ng-class