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与flash交互通信基础教程
Aug 07 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
JS的get和set使用示例
2014/02/20 Javascript
node.js入门教程
2014/06/01 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
express框架下使用session的方法
2019/07/31 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
vue接口请求加密实例
2020/08/11 Javascript
python端口扫描系统实现方法
2014/11/19 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
Django自定义manage命令实例代码
2018/02/11 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
主题酒店策划书
2014/01/28 职场文书
企业文化标语口号
2014/06/09 职场文书
首次购房证明
2015/06/19 职场文书
工作感想范文
2015/08/07 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
MySQL GTID复制的具体使用
2022/05/20 MySQL