ng-click / ng-class не работает должным образом с $index

Question

Почему-то мой ng-click / ng-class комбинация не работает. На клик "hideдолжен быть добавлен на основе равенства productDisplay переменная.

            <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 и применит его при каждом щелчке, или улучшит код, который вы можете использовать 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>

Обновить

То же самое можно сделать, поддерживая productDisplay переменная в родительской области видимости ng-repeat тогда вам нужно $parent.productDisplay внутри ng-repeat

<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>

Благодарю.