在点击标签不起作用

我有一个非常简单的例子使用$指数（见：http://plnkr.co/edit/w15Ov5T3vMXK7bfC34M2?p=preview]）在点击标签不起作用

我使用ng-repeat指令，以显示我的数据。数据来自'群组'。在每组内我有动态数据和静态数据。

我希望让用户能够将每个组内的动态数据的切换知名度。

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

在每个按钮上，我还添加了一个虚拟属性data-private-index，值为"{{$index}}"，以确保Angular能够正确替换。

This Works。当我忽略浏览器中的元素时，替换值出现在DOM中。

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

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

enter image description here

一些意外，我跑进：

1 - 的{{$index}}值不出现在onclick属性得到取代（通过检查DOM看到）在第一

点击按钮触发alert(...)。但我得到的消息

切换组{{$指数}}

这进一步表明，替代未能成行。

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

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

看来，ng-click被自动忽略（可能由于一些错误，我无法辨别）

所以，我怎么可以动态切换div的知名度？

来源

2015-06-20 david marcus

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

你可以像这样做id="'car_{{ $index }}'"但它在事件内部失败。

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

要使用可以使用纳克级，让你把一个especific类依赖的条件纳克级=的更具体的行为，请使用“{‘我的定制隐藏’：areaVisible}”

来源

2015-06-20 16:39:02 chfumero

你需要使用一个负责切换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方法，就像你试图访问索引使用{{}}这将永远不会工作。对于这种情况，角度确实提供了他自己的方法，如ng-click，ng-blur,ng-focus等都是基于事件的指令。虽然你可以访问元素，并使用正确的元素例如id。 document.querySelector('group-1')你无法使.toggle可行，因为你需要添加jQuery，那么只有你可以在元素上使用.toggle()。

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

来源

2015-06-20 16:39:59

在点击标签不起作用

回答

相关问题