angularjs - 基于ng-click索引AngularJS更改图像src

我有这个angularJS代码，指令模板定义了：

<li ng-repeat="i in getNum(myNum)" ng-click="toggle($index)" id=$index>
      <img src="img/{{ImgTest}}">
 </li>

另外，我的指令代码有：

link: function (scope, elem, attrs) {
        scope.ImgTest= "Img_1";

在ng-click上，我希望在将所有<li>元素的图像从Img_1单击到Img_2之前将其更改。（因此，将所有<li>元素的索引更改为0到单击的$index之间）。

如何实现呢？ .. 谢谢

最佳答案

我们可以使用由我称为ng-switch的变量控制的switchPoint，switchPoint被$index设置为toggle()。

switchPoint之前的所有内容都将使用ImgTest，而之后的所有内容都将使用ImgTest2。

这是ng-switch代码（针对$index测试当前的switchPoint）。

<div ng-switch="switchPoint < $index">
    <div ng-switch-when=true>
        <img src="img/{{ImgTest}}">
    </div>
    <div ng-switch-when=false>
         <img src="img/{{ImgTest2}}">
    </div>
</div>

这是带有切换功能和switchPoint变量的更新的链接功能。

link: function (scope, elem, attrs) {
     scope.ImgTest= "Img_1";
     scope.ImgTest2= "Img_2";
     scope.switchPoint = -1;
     scope.toggle= function(val) {
        scope.switchPoint= val;
    };
}

这是一个小提琴（打印{{imgTest}} ...而不是纯粹为了简单起见使用图像）：http://jsfiddle.net/ueX3r/