ng-click / ng-class 组合无法按预期使用 $index

Question

出于某种原因，我的 ng-click / ng-class 组合不起作用。单击 class 时，必须根据 productDisplay 变量的相等性添加“hide”。

            <div ng-repeat="product in project.data track by $index">

                <p ng-click="productDisplay = $index"><strong>{{product.name}}</strong></p>

                <div class="fileList" ng-class="{'hide': productDisplay !== $index}">{{$index}}</div>

我可以单击 <p> 元素，div fileList 将打开，但一旦打开我就无法关闭它们。

有什么想法吗？

谢谢，

Answer 1

尝试切换而不是 $index，使用 productDisplay = !productDisplay 这将更改 ng-class 表达式并在单击时应用隐藏 class，或更多更好的代码你可以使用 ng-if/ng-show/ng-hide 而不是 ng-class.

HTML

<div ng-repeat="product in project.data track by $index">

    <p ng-click="productDisplay = !productDisplay"><strong>{{product.name}}</strong></p>

    <div class="fileList" ng-class="{'hide': productDisplay">{{$index}}</div>
</div>

更新

同样的事情可以通过在 ng-repeat 的父范围内维护 productDisplay 变量来完成，然后你需要在 ng-repeat

中 $parent.productDisplay

<div ng-repeat="product in project.data track by $index">

    <p ng-click="$parent.productDisplay = $index"><strong>{{product.name}}</strong></p>

    <div class="fileList" ng-class="{'hide': $parent.productDisplay !== $index">{{$index}}</div>
</div>

谢谢。

ng-click / ng-class 组合无法按预期使用 $index

ng-click / ng-class combination not working as expected with $index

angularjs

angularjs-ng-click

ng-class