[英]AngularJS - ngSwitch and ngClick not working in ngRepeat
I want to display the elements of a list thanks to a ngSwitch
but I can't figure out how to do with a ngRepeat
. 我希望通过ngSwitch
显示列表的元素,但我无法弄清楚如何处理ngRepeat
。 I've begun by doing it without a list, just to understand how ngSwitch
works and to show you what I want to do, here's a jsFiddle that will help you understand: jdFiffle 1 我开始没有列表,只是为了理解ngSwitch
如何工作并向你展示我想做什么,这里有一个jsFiddle,可以帮助你理解: jdFiffle 1
Then, I try to use a list with ngRepeat
but, whatever I try to do, it doesn't work. 然后,我尝试使用带有ngRepeat
的列表,但是,无论我尝试做什么,它都不起作用。 Here's a second jsFiddle with, this time, the use of a list: jsFiddle 2 这是第二个jsFiddle,这次使用了一个列表: jsFiddle 2
It seems that ngClick
and ngSwitch
don't work when they're inside a ngRepeat
... How can I do to make things work? 当ngClick
和ngSwitch
在ngRepeat
时它们似乎ngRepeat
......我怎样才能使事情有效? Thanks in advance! 提前致谢!
Some problems: 一些问题:
When dealing with angular-directives, you usually don't need to use the {{...}}
syntax, just use the real values. 处理角度指令时,通常不需要使用{{...}}
语法,只需使用实际值。 So instead of: 所以代替:
data-ng-click="sw='{{test.name}}'"
use: 采用:
data-ng-click="sw = test.name"
(see next point for why this won't be enough) (见下一点为什么这还不够)
ng-repeat
uses its own scope with transclusion, so the above will set sw
in the wrong scope, use: ng-repeat
使用自己的范围进行转换,因此上面将sw
设置在错误的范围内,使用:
data-ng-click="$parent.sw = test.name"
you can't build ng-switch-when
's with ng-repeat
, try ng-show/hide
instead try: 你不能用ng-repeat
建立ng-switch-when
,试试ng-show/hide
试试:
<div ng-repeat="test in tests" ng-show="sw == test.name">
demo: http://jsbin.com/uxobot/1/ 演示: http : //jsbin.com/uxobot/1/
But all in all, I don't see the need for ng-switch/ng-repeat
on the second div. 但总而言之,我认为第二个div上不需要ng-switch/ng-repeat
。 The following has the same effect and is probably a lot more semantic: 以下具有相同的效果,可能更加语义化:
<div ng-controller="MyCtrl">
<div class="click">
<div ng-repeat="test in tests" data-ng-click="$parent.active = test">
{{test.name}}
</div>
</div>
<div class="switch">
{{active.text}}
</div>
</div>
demo: http://jsbin.com/elufow/1/ 演示: http : //jsbin.com/elufow/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.