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的变量和一个带有编号ID的嵌套菜单，例如1:2，1:3，1:4，2:1，2:2，2:3等等。

目标非常简单。如果$parent.$index:$index等于$scope.current，则需要将<li>设置为活动状态。每当触发openpic($parent.$index, $index)时，都会设置ID。在CSS中，我们有li.active类。

那么，有人可以告诉我这段代码缺少什么吗？

尝试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仍然显示为class="ng-binding ng-scope"

第四次尝试

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

这解决了问题，但对于一个简单的开关功能来说似乎有点过头了。还有其他想法吗？

尝试5

根据major-mann代码建议，在尝试4的基础上做了一些调整，令人惊讶的是，它起作用了。

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

那个方法有效。完全删除了所有大括号？？？

- Magician

---

是的，在控制器$scope中。让我试试。 - Magician

作为替代方案，您可以在您的范围内编写一个函数来返回类名。 - Sambhav Gore

作为一般规则，我通常在控制器中创建函数来处理类似连接等操作，并在视图中调用这些函数（例如 ng-class="isActive($parent.$index, $index)"）。我发现这样做可以让调试变得非常简单。虽然这不是一个很具体的回答，但希望对您有所帮助。 - major-mann

我肯定没有“active”类，但让我检查一下。 - Magician

主要的问题解决了。如果您将其作为答案，我会选择它。 - Magician

Answer 1

首先使用{{$parent.$index:$index}}确保获取正确的数据（我从未遇到过这种访问数据的方法）；
如果没问题，那么尝试使用：

ng-class="$parent.$index:$index === current ? 'active' : ''"

或者（最好的方法）使用函数来实现这一点：

ng-class="someFn($parent.$index)"

$scope.someFn = function(index){
    //index, index:index, index[n] or something else;
    return index === $scope.current ? 'active' : '';
};

更新：
如果您想要访问父级ng-repeat，最好使用

<...  ng-repeat="(index1, data1) in firstData">
    <...  ng-repeat="(index2, data2) in secondData">
        <... ng-something="index1 operator index2 or function(index1, index2)">

我希望这能有所帮助，

- user3335966

---

是的，它有效。但是major-mann先指出了同样的事情。很抱歉没有将答案授予您。我正在等待他将评论作为答案发表，然后我会选择它。我认为这是公平的。 - Magician

@Magician 我完全同意 =) - user3335966

Answer 2

正如评论所指出的那样，虽然不是正解，但通常最佳实践是将代码（即使是简单的三元表达式）放在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'
    };
}

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

- major-mann

---

实际上，是ng-class="isActive($parent.$index, $index)"给了我灵感，而不是isActive函数本身。 - Magician