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

点击一下，我希望在点击Img_1到Img_2之前更改所有<li>元素的图像。（因此，更改所有<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;
    };
}

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

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

1 个答案: