angularjs下ng-repeat点击元素改变样式实现

来源:互联网 发布:脚本王者荣耀软件 编辑:程序博客网 时间:2024/06/04 23:24

1.一个angularjs的学习,了解ng-class的使用技巧;

2.代码:

 html: <div ng-repeat='myimg in myimgs'>            <img ng-src="{{myimg}}" ng-click="fabricChoose($index)"  ng-class="{fabricImg1:$index==fabricIsSelected}"> </div>
css.fabricImg1{border:2px solid blue;}
js:$scope.fabricChoose = function(i){   $scope.fabricIsSelected = i;}

效果就是点击选择图片 就出现蓝色border。

这里写图片描述

3.分析

ng-class的使用技巧就是 ng-class=’{name:istrue}’ ,在css中写.name的样式 ,当istrue布尔值为true时,此元素就会添加.name的样式,为false时,不增加这个样式。