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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
Javascript中神奇的this
Jan 20 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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中使用memcache存储session的三种配置方法
2014/04/05 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
Python实现删除文件但保留指定文件
2015/06/21 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
python安装requests库的实例代码
2019/06/25 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
介绍下Java的输入输出流
2014/01/22 面试题
实习自我鉴定
2013/12/15 职场文书
前处理班长职位说明书
2014/03/01 职场文书
应届毕业生求职信
2014/05/26 职场文书
文明城市标语
2014/06/16 职场文书
公民授权委托书
2014/10/15 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
呐喊读书笔记
2015/06/30 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
Django实现翻页的示例代码
2021/05/24 Python
python运算符之与用户交互
2022/04/13 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python