在单击标记时使用$ 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元素）。

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

我遇到了一些惊喜：

1 - 在{{$index}}属性中似乎没有替换onclick的值（请参阅检查DOM）

点击第一个按钮会触发alert(...)。但是我得到了消息

  

切换组{{$ 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}}')的切换方法，因为您无法访问本机javascript方法中的角度范围变量尝试使用{{}}访问索引，这将永远不会起作用。对于这种情况，angular确实提供了他自己的方法，如ng-click，ng-blur，ng-focus等基于事件的指令。虽然您可以访问元素并使用正确的id元素，例如。 document.querySelector('group-1')您无法使.toggle变得可行，因为您需要添加jQuery，那么只有您可以在元素上使用.toggle()。

在处理angular时你不应该假设在使用元素时使用jQuery，因为这可能会导致绑定更新问题，大多数情况下你需要手动运行摘要周期来使用$scope.$apply()更新绑定但不要这样做。它被认为是AngularJS中的不良做法。您可以使用jQuery但它应该包装在指令中，以便您可以控制Angular DOM并在角度上下文中对其进行修改。

Answer 2

显然，角度以非常个人的方式处理事件语句，您必须使用ng-click指令。

您可以执行类似function removeDiv (){ $('#divPlay').removeClass("visible").addClass("hidden"); } <a onclick="removeDiv()">Remove</a> 之类的操作但在事件中失败。

有几种隐藏元素的方法，最直接的是ng-hide和ng-show指令。

要使用更具体的行为，您可以使用ng-class，允许您根据条件设置特定类ng-class ='{'my-custom-hide'：areaVisible}'