更改图片src基于NG-点击指数AngularJS [英] Change image src based on ng-click index AngularJS

问题描述

我有这个angularJS code，该指令模板定义：

I have this angularJS code, the directive template defines:

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

另外，我的指令code的：

Also, my directive code has :

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

在一个NG单击我想更改所有＆LT形象;李＆GT; 一个元素之前从Img_1单击以Img_2。 （所以改变所有的＆LT;李＆GT; 0和 $指数中的一个点击之间的索引元素）

On an ng-click I wish to change the image on all the <li> elements before the one clicked from Img_1 to Img_2. (So change all the <li> elements with an index between 0 and the $index of the one clicked).

如何才能实现这一目标？结果..谢谢

How can this be achieved ?
.. Thanks

推荐答案

我们可以使用 NG-开关由一个变量我打电话控切换点，切换点设置为 $指数按切换（））。

We can use an ng-switch that is controlled by a variable I'm calling switchPoint, switchPoint is set to $index by toggle()).

之前的所有切换点将使用 ImgTest ，而一切后，将使用 ImgTest2 。

Everything before switchPoint will use ImgTest while everything after will use ImgTest2.

这里的 NG-开关 code（其中测试电流​​ $指数对切换点）。

Here's the ng-switch code (which tests the current $index against 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>

下面是与切换功能更新的链接功能，而切换点变量。

Here's an updated link function with the toggle function, and switchPoint variable.

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 /

Here's a fiddle (that prints {{imgTest}}... instead of using an image purely for simplicity sake): http://jsfiddle.net/ueX3r/

这篇关于更改图片src基于NG-点击指数AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！