在点击标签不起作用
我有一个非常简单的例子使用$指数(见: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
的可见性。
一些意外,我跑进:
1 - 的{{$index}}
值不出现在onclick
属性得到取代(通过检查DOM看到)在第一
点击按钮触发alert(...)
。但我得到的消息
切换组{{$指数}}
这进一步表明,替代未能成行。
那么为什么替换发生在div
而不是onclick
属性? 我错过了什么?
2 - 单击第二个按钮甚至不会触发alert(...)
。
看来,ng-click
被自动忽略(可能由于一些错误,我无法辨别)
所以,我怎么可以动态切换div
的知名度?
显然,角度处理事件语句是非常私人的方式,您必须使用ng-click指令。
你可以像这样做id="'car_{{ $index }}'"
但它在事件内部失败。
有几种隐藏元素的方法,最直接的是ng-hide和ng-show指令。
要使用可以使用纳克级,让你把一个especific类依赖的条件纳克级=的更具体的行为,请使用“{‘我的定制隐藏’:areaVisible}”
你需要使用一个负责切换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>
您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并在角度上下文中对其进行修改。