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

发布时间：2020-12-17 10:20:01 所属栏目：安全来源：网络整理

导读：我有这个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上我希望更

我有这个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,通过toggle()将switchPoint设置为$index.

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

这是ng-switch代码(它针对switchPoint测试当前的$index).

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

这是一个带有toggle函数和switchPoint变量的更新链接函数.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!