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


Posted in Javascript onSeptember 12, 2018

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。

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

3.分析

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

以上这篇angularjs下ng-repeat点击元素改变样式的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
webpack3之loader全解析
Oct 26 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 #Javascript
vue服务端渲染缓存应用详解
Sep 12 #Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 #Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 #Javascript
详解JavaScript中操作符和表达式
Sep 12 #Javascript
JS 数组随机洗牌的实例代码
Sep 12 #Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 #Javascript
You might like
Laravel 5框架学习之表单验证
2015/04/08 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python3操作mysql数据库的方法
2017/06/23 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
十佳大学生事迹材料
2014/01/29 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python