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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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
多重?l件?合查?(二)
2006/10/09 PHP
php 中文处理函数集合
2008/08/27 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
javascript几个易错点记录
2014/11/26 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
Python Web框架Tornado运行和部署
2020/10/19 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
Python 日期与时间转换的方法
2020/08/01 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
好的自荐信的要求
2013/10/30 职场文书
商务英语专业求职信
2014/06/26 职场文书
爱的教育观后感
2015/06/17 职场文书
2015暑假假期总结
2015/07/13 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
八年级作文之感恩
2019/11/22 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android