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的调试
Jan 28 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
VueJS实现用户管理系统
May 29 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 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 addslashes 函数详细分析说明
2009/06/23 PHP
php htmlspecialchars加强版
2010/02/16 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
Python3写入文件常用方法实例分析
2015/05/22 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
python实现列表的排序方法分享
2019/07/01 Python
DNA基因检测和分析:23andMe
2019/05/01 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
法人代表委托书
2014/04/04 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
环保建议书作文300字
2015/09/14 职场文书
详解Go语言中Get/Post请求测试
2022/06/01 Golang