javascript - 在单击标签时使用 $index 不起作用

Question

我有一个非常简单的示例(请参阅:http://plnkr.co/edit/w15Ov5T3vMXK7bfC34M2?p=preview])

我正在使用 ng-repeat 指令来显示我的数据。

数据以“组”形式出现。在每个组中，我都有动态数据和静态数据。

我想让用户能够切换每个组内动态数据的可见性。

在我的 html 中，我为每个组设置了两个按钮:一个使用 onclick，另一个使用 ng-click。

在每个按钮上，我还添加了一个虚拟属性 data-private-index ，其值为 "{{$index}}" 以确保 Angular 执行正确的操作代换。

这有效。当我在浏览器中检查元素时，替换值出现在 DOM 中。

有一个 div 包装每个动态数据。我将其 id 属性设置为 "group-{{$index}}" ，这也可以正常工作(通过检查 DOM 元素)。

在每个按钮中，我设置了一个 click 事件处理程序，其想法是切换包装动态数据的 div 的可见性。

我遇到的一些惊喜:

1 - {{$index}} 的值似乎没有在 onclick 属性中被替换(通过检查 DOM 查看)

单击第一个按钮会触发警报(...)。但我收到消息了

toggling group {{$index}}

这进一步表明替换没有发生。

那么为什么替换发生在 div 上而不是发生在 onclick 属性上呢？ 我错过了什么？

2 - 单击第二个按钮甚至不会触发alert(...)。

似乎ng-click被默默地忽略了(可能是由于一些我无法辨别的错误)

<小时/>

那么，如何动态切换 div 的可见性？

Answer 1

您需要使用一个变量来负责切换 div。您可以在每个重复的 div 上使用 show 变量，该变量将被维护为可切换标志。

标记

  <div ng-repeat="item in ['group#0', 'group#1', 'group#2']">
    <p>{{item}}
      <button ng-click="alert('toggling group '+ $index); show=!show" data-private-index="{{$index}}">
        Toogle group #{{$index}} using ng-click
      </button>
    </p>

    <div id="group-{{$index}}" ng-show="show">
      ..content here..
    </div>

    <div>
      <br/> Static non-toggled data
      <br/> Static non-toggled data
    </div>
  </div>

Demo Plunkr

您的onclick事件不起作用，因为您正在尝试调用元素document.querySelector('group-{{$index}}')的切换方法不会给出该元素，因为您无法访问 native javascript 方法内的 Angular 范围变量，就像您尝试使用 {{}} 访问索引一样，这将永远无法工作。对于这种情况，Angular 确实提供了自己的方法，例如 ng-click、ng-blur、ng-focus 等都是基于事件的指令。尽管您可以访问元素并使用元素的正确id，例如。 document.querySelector('group-1') 您无法使 .toggle 可行，因为您需要添加 jQuery，那么只有您可以使用 元素上的 .toggle() 。

在处理 Angular 时，您不应该在处理元素时使用 jQuery，因为这可能会导致绑定(bind)更新问题，大多数时候您需要手动运行摘要循环以使用 $scope.$apply 更新绑定(bind)() 但不要这样做。它被认为是 AngularJS 中的不良实践。您可以使用 jQuery，但它应该包装在指令中，以便您可以控制 Angular DOM 并在 Angular 上下文中修改它。