根据ng-click索引AngularJS更改图像src

Question

我有这个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单击之间的所有元素).

怎么能实现这一目标？
.. 谢谢

Answer 1

我们可以使用ng-switch由我正在调用的变量控制的switchPoint, switchPoint设置为$indexby 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/