angularjs - 如何在 ng-repeat-start/end 中的 ng-click 上使用 $index

Question

我有一个简单的 ng-repeat-start 和 ng-repeat-end。在 ng-repeat 中，我有一个 ng-click。如何在 ng-click 中使用 ng-repeat-start 中的 $index 来显示/隐藏 ng-show。

HTML：

<ul>
    <li ng-repeat="data in MyData track by $index">
        <p>Show me my {{ data }}</p>
    </li>
    <li>
        <div>
            <p>Select</p>
            <span ng-click="{{'showHidden'+$index = !'showHidden'+$index}}"></span>
        </div>
        <div>
            <p ng-show="{{'showHidden'+$index}}">My hidden content, my hidden content, my hidden content, my hidden content, my hidden content, my hidden content </p>
        </div>
    </li>
    <li ng-repeat-end>
        <p>{{ data.name }}</p>
        <p>{{ data.age}}</p>
    </li>
</ul>

基本上我所拥有的是：

ng-click="{{'showHidden'+$index = !'showHidden'+$index}}"

ng-show="{{'showHidden'+$index}}"

其中 $index 由父 ng-repeat-start 确定

Answer 1

您可以初始化一个临时变量来跟踪可见性布尔值（我只是将其称为“可见”）。ng-repeat 的每个循环都有自己的 $scope，因此新变量被限制在该 $scope 中。

http://jsfiddle.net/HB7LU/12783/

<div ng-controller="MyCtrl">
  <ul>
    <li ng-repeat-start="data in MyData track by $index" ng-init="visible = false">
        <p>Show me my {{ data }}</p>
    </li>
    <li>
        <div>
            <p>Select</p>
            <a href="" ng-click="visible = !visible">*</a>
        </div>
        <div>
            <p ng-show="visible">My hidden content, my hidden content, my hidden content, my hidden content, my hidden content, my hidden content </p>
        </div>
    </li>
    <li ng-repeat-end>
        <p>{{ data.name }}</p>
        <p>{{ data.age}}</p>
    </li>
</ul>
</div>