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 相关文章推荐
js的表单操作 简单计算器
Dec 29 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
header跳转和include包含问题详解
2012/09/08 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP中cookie知识点学习
2018/05/06 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
JS实现div模块的截图并下载功能
2017/10/17 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python实现二分查找算法
2017/09/21 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
区政府领导班子个人对照检查材料
2014/09/25 职场文书
神秘岛读书笔记
2015/07/01 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL