编程语言
首页 > 编程语言> > javascript – AngularJS – ngSwitch和ngClick不在ngRepeat中工作

javascript – AngularJS – ngSwitch和ngClick不在ngRepeat中工作

作者:互联网

我希望通过ngSwitch显示列表的元素,但我无法弄清楚如何处理ngRepeat.我开始没有列表,只是为了理解ngSwitch如何工作并告诉你我想做什么,这里有一个jsFiddle,可以帮助你理解:jdFiffle 1

然后,我尝试使用带有ngRepeat的列表,但是,无论我尝试做什么,它都不起作用.这是第二个jsFiddle,这次使用列表:jsFiddle 2

当ngClick和ngSwitch在ngRepeat中时它们似乎不起作用……我怎样才能使事情有效?提前致谢!

解决方法:

一些问题:

>在处理角度指令时,通常不需要使用{{…}}语法,只需使用实际值.所以代替:

data-ng-click="sw='{{test.name}}'"

使用:

data-ng-click="sw = test.name"

(见下一点为什么这还不够)
> ng-repeat使用自己的范围进行转换,因此上面将sw设置在错误的范围内,使用:

data-ng-click="$parent.sw = test.name"

>你不能用ng-repeat建立ng-switch-when,试试ng-show / hide试试:

<div ng-repeat="test in tests" ng-show="sw == test.name">

演示:http://jsbin.com/uxobot/1/

但总而言之,我认为第二个div上不需要ng-switch / ng-repeat.以下具有相同的效果,可能更加语义化:

<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>

演示:http://jsbin.com/elufow/1/

标签:javascript,angularjs,angularjs-ng-repeat,angularjs-ng-click
来源: https://codeday.me/bug/20190716/1478653.html