Как использовать $index для ng-click в ng-repeat-start/end

Question

У меня есть простой ng-repeat-start и ng-repeat-end. В ng-repeat у меня есть ng-click. Как я могу использовать $index из ng-repeat-start внутри ng-click, чтобы показать / скрыть 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 имеет свою собственную область действия $, поэтому новая переменная ограничена этой областью действия $.

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>