如何在 ng-repeat 中使用 $index 来启用类并显示 DIV? [英] How can I use the $index inside a ng-repeat to enable a class and show a DIV?

问题描述

我有一组

元素.

<li ng-class="{current: selected == 100}"><a href ng:click="selected=100">ABC</a><li ng-class="{current: selected == 101}"><a href ng:click="selected=101">DEF</a><li ng-class="{current: selected == $index }"ng-repeat="x in [4,5,6,7]"><a href ng:click="selected=$index">A{{$index}}</a>

当用户点击上面的地址元素之一时，它应该设置 selected 的值并显示下面的

元素之一:

100
<div ng:show="selected == 101">101</div><div ng-repeat="x in [4,5,6,7]" ng:show="selected == $index">{{ $index }}</div>

这适用于前两种情况.

• 当用户单击 ABC 时，第一个
  显示 100 并将颜色更改为红色.
• 单击 DEF 时，会显示 101，并且 DEF 变为红色.

但是它对 A0、A1、A2 和 A3 根本不起作用

• 当用户点击 A0、A1、A2 或 A3 时，不显示正确的值，未设置所选值，所有 ng-repeat A0、A1、A2 和 A3 的颜色变为红色.

如果你看看这个Plunker，这会得到最好的展示:

http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview

请注意，我在顶部添加了 {{ selected }} 作为调试帮助.[4,5,6,7] 中的 x 也只是为了模拟循环.在现实生活中，我将其作为 ng-repeat="answer in modal.data.answers".

有谁知道我如何设置它以便 li 类当前设置在正确的时间并且 DIV 在 A0 的正确时间显示，A1、A2 和 A3

和

解决方案

这里的问题是 ng-repeat 创建了自己的作用域，所以当你执行 selected=$index 它会在该范围内创建一个新的 selected 属性，而不是更改现有的属性.要解决此问题，您有两个选择:

将 selected 属性更改为非原始属性(即对象或数组，这会使 javascript 查找原型链)然后在其上设置一个值:

$scope.selected = {value: 0};<a ng-click="selected.value = $index">A{{$index}}</a>

见 plunker

或

使用 $parent 变量访问正确的属性.虽然不太推荐，因为它增加了范围之间的耦合

<a ng-click="$parent.selected = $index">A{{$index}}</a>

见 plunker

I have a set of <li> elements.

<ul>
  <li ng-class="{current: selected == 100}">
     <a href ng:click="selected=100">ABC</a>
  </li>
  <li ng-class="{current: selected == 101}">
     <a href ng:click="selected=101">DEF</a>
  </li>
  <li ng-class="{current: selected == $index }" 
      ng-repeat="x in [4,5,6,7]">
     <a href ng:click="selected=$index">A{{$index}}</a>
  </li>
</ul>

When a user clicks on one of the address elements above then then it should, set the value of selected and show one of the <DIV> elements below:

<div  ng:show="selected == 100">100</div>
<div  ng:show="selected == 101">101</div>
<div ng-repeat="x in [4,5,6,7]" ng:show="selected == $index">{{ $index }}</div>

This works for the first two cases.

• When the user clicks ABC then the first <DIV> shows 100 and changes color to red.
• When DEF is clicked then 101 shows and DEF changes to red.

However it does not work at all for A0, A1, A2 and A3

• When a user clicks A0, A1, A2 or A3 then the correct does not show, the selected value is not set and the color of ALL the ng-repeat A0,A1,A2 and A3 turn to red.

This is best shown if you look at this Plunker:

http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview

Note that at the top I have added {{ selected }} as a debug aid at the top. Also the x in [4,5,6,7] are just meant to simulate a loop. In real life I have this as ng-repeat="answer in modal.data.answers".

Does anyone know how I can set this up so that the li class current is set at the right time and the DIV shows at the right time for the A0, A1, A2 and A3 <li> and <DIV>

解决方案

The issue here is that ng-repeat creates its own scope, so when you do selected=$index it creates a new a selected property in that scope rather than altering the existing one. To fix this you have two options:

Change the selected property to a non-primitive (ie object or array, which makes javascript look up the prototype chain) then set a value on that:

$scope.selected = {value: 0};

<a ng-click="selected.value = $index">A{{$index}}</a>

See plunker

or

Use the $parent variable to access the correct property. Though less recommended as it increases coupling between scopes

<a ng-click="$parent.selected = $index">A{{$index}}</a>

See plunker

这篇关于如何在 ng-repeat 中使用 $index 来启用类并显示 DIV?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！