Angular JS：一次仅切换一个项目

Question

因此，我有一个要进行ng-repeat的名称列表，并且我对每个名称都进行了ng-click该名称可以显示工具提示。 我这样做是这样的：

<li ng-repeat="person in names" ng-click="tooltip = !tooltip">
  <span>{{ person }}</span>
  <div class="tooltip" ng-show="tooltip">This is {{ person }}'s tooltip</div>
</li>

单击人员1的名称时，将显示其工具提示，但单击人员2时，也将显示其工具提示。 我只希望一次显示一个工具提示。 使用上面的切换技术tooltip = !tooltip是否可以？

我已经在这里设置了我的问题的JS Bin： https : //jsbin.com/faxoviwuze/1/edit?html ,js, output

任何帮助表示赞赏。

提前致谢！

Answer 1

使用$index ：

<ul ng-init="model.tooltip=-1">
<li ng-repeat="person in names" ng-click="model.tooltip = $index">
  <span>{{ person }}</span>
  <div class="tooltip" ng-show="model.tooltip==$index">This is {{ person }}'s tooltip</div>
</li>
</ul>

我建议不要使用诸如tooltip类的标量范围变量。
解除绑定很容易。 使用诸如model.tooltip类的model.tooltip 。

简单的小提琴

---

另外，没有理由注入$scope scope-您可以使用controllerAs语法。

JSBin