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 打地鼠游戏代码说明
Oct 12 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
动态加载js文件简单示例
Apr 21 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
replace()方法查找字符使用示例
2013/10/28 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
SVG描边动画
2017/02/23 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
python检测远程服务器tcp端口的方法
2015/03/14 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
python的json包位置及用法总结
2020/06/21 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
毕业生的自我评价范文
2013/12/31 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
三八节主持词
2014/03/17 职场文书
食品安全工作方案
2014/05/07 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
工作调动申请报告
2015/05/18 职场文书
英雄儿女观后感
2015/06/09 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL