angularjs - 根据 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设置为 $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;
    };
}

这是一个 fiddle (打印 {{imgTest}}... 而不是纯粹为了简单起见使用图像): http://jsfiddle.net/ueX3r/