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 相关文章推荐
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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
PHP遍历数组的几种方法
2012/03/22 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
js实现3D旋转相册
2020/08/02 Javascript
python实现的简单抽奖系统实例
2015/05/22 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Django工程的分层结构详解
2019/07/18 Python
使用Django清空数据库并重新生成
2020/04/03 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
工程师自我评价怎么写
2013/09/19 职场文书
老师对学生的评语
2014/04/18 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
水电工程师岗位职责
2015/02/13 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
python基础详解之if循环语句
2021/04/24 Python
Kubernetes控制节点的部署
2022/04/01 Servers