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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
在普通HTTP上安全地传输密码
2007/07/21 PHP
中英文字符串翻转函数
2008/12/09 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
禁止IE用右键的JS代码
2013/12/30 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
Node.js+Express配置入门教程详解
2016/05/19 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Python2与Python3的区别实例分析
2019/04/11 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
药店促销活动总结
2014/07/10 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
2014会计年终工作总结
2014/12/20 职场文书
高考百日冲刺决心书
2015/09/23 职场文书