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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
PHP中的类型约束介绍
2015/05/11 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
简单介绍Python中的JSON模块
2015/04/08 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
简单说说tomcat的配置
2013/05/28 面试题
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
美术教师求职信范文
2015/03/20 职场文书
格林童话读书笔记
2015/06/30 职场文书
校长新学期寄语2016
2015/12/04 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang