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 Array.prototype.slice使用说明
Oct 11 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
javascript实现拖放效果
Dec 16 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
vue实现简单全选和反选功能
Sep 15 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用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php array的学习笔记
2012/05/10 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
JS实现留言板功能
2017/06/17 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
tensorflow识别自己手写数字
2018/03/14 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python队列原理及实现方法示例
2019/11/27 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
乡村文明行动实施方案
2014/03/29 职场文书
庆祝国庆节标语
2014/10/09 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
关于做家务的心得体会
2016/01/23 职场文书