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

时间:2015-11-13 16:33:48

标签: javascript jquery angularjs

所以我有一个名单列表,我正在进行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>

当您点击某个人的姓名时,他们的工具提示会出现,但当您点击此人2时,他们的工具提示也会出现。我想一次只出现一个工具提示。这是否可以使用上面的切换技术tooltip = !tooltip

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

感谢任何帮助。

提前致谢!

1 个答案:

答案 0 :(得分:3)

使用$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注入没有理由 - 您可以使用controllerAs语法。

JSBin