javascript - Angular JS : Toggle Only One Item at a Time

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 的内容。

Simple fiddle

---

此外，$scope 注入(inject)没有理由——您可以使用 controllerAs 语法。

JSBin