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。我们在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="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

首先让{{$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)">

我希望，这会有所帮助;

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'
    };
}

并在视图中正确调用该函数。

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

尝试1：

尝试2

尝试3

尝试4

尝试5

2 个答案: