ng-class不工作.我哪里做错了？

Question

我知道这里列出的问题有很多.但我无法确定我做错了什么..

<li ng-repeat="item in type.sub | orderBy:y" ng-click="openpic($parent.$index, $index)" ng-class="{ 'active': $parent.$index + ':' + $index == current }">

我们有$scope.current变量,以及编号为1:2,1:3,1:4,2:1,2:2,2:3的嵌套菜单,依此类推.

目标很简单.<li>如果$parent.$index:$index等于,我需要将其激活$scope.current.openpic($parent.$index, $index)触发时设置ID .我们li.active在css上课.

那么,有人可以告诉我,那段代码中缺少什么？

尝试1:

尝试:

<li ng-repeat="item in type.sub | orderBy:y" ng-click="openpic($parent.$index, $index)" ng-class="{ 'active': $parent.$index + ':' + $index == $parent.current }">

还是行不通.

尝试2

我有这样的事情:

ng-class="{{ $parent.$index + ':' + $index == $parent.current && 'active' || '' }}"

并显示为ng-class="active"但class属性未更新.

尝试3

ng-class="{{ $parent.$index + ':' + $index == $parent.current && 'highlight' || '' }}"

它表明ng-class='highlight",但课程仍然显示class="ng-binding ng-scope"

尝试4

ng-class="isActive($parent.$index,$index)"

它解决了这个问题,但对于一个简单的开关功能来说似乎有些过分.还有什么想法吗？

尝试5

根据在TRY 4工作的major-mann代码建议,我进行了这些调整,并且令人惊讶的是,它起作用.

ng-class="$parent.$index + ':' + $index == $parent.current && 'active' || ''"

那一个有效.完全删掉所有大括号????

Answer 1

正如评论中所指出的，这不是答案，但通常最好的做法是尝试将代码（甚至简单的三元组）保留在 JavaScript 块内而不是 HTML 内。这通常会使调试您可能遇到的任何问题变得更加容易处理。

例如，您可以将 HTML 更改为以下内容：

<li ng-repeat="..." ng-click="..." ng-class="isActive($parent.$index, $index)">

在你的控制器中，你可以添加类似的内容：

$scope.menu= function isActive(pidx, idx) {
    return {
        active: pidx + ':' + idx === $scope.current
    };
};

达到您想要的结果。

如果您更进一步，您可能会意识到这样做更好

$scope.cls.menu = function(pidx, idx) {
    return {
        active: pidx + ':' + idx === $scope.current,
        any: 'other',
        dynamic: 'classes',
        you: 'need'
    };
}

并在视图中适当地调用该函数。