欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

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

时间:2021-06-05 08:57:19|栏目:AngularJS|点击:

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时,不增加这个样式。

上一篇:在React框架中实现一些AngularJS中ng指令的例子

栏    目:AngularJS

下一篇:angularjs 页面自适应高度的方法

本文标题:angularjs下ng-repeat点击元素改变样式的实现方法

本文地址:http://www.codeinn.net/misctech/135492.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有