angularJs使用ng-repeat遍历后选中某一个的方法


Posted in Javascript onSeptember 30, 2018

1、html代码如下所示:

<div>
  <button ng-repeat="t in deptName" class="deptDiv"
    ng-class="{'deptDivOnclick':selected==t.name}"
    ng-click="showDeptEmps(t.name )">{{ t.name }}
  </button>
 </div>

2、angular代码如下所示:

$scope.showDeptEmps = function (dName) {
    $scope.selected = dName; //设置点击按钮背景颜色
   };

其中:

$scope.deptName = [{name;"部门1"},{name;"部门2"},{name;"部门3"},{name;"部门4"}];

3、CSS代码如下所示:

.deptDiv {
   margin: 10px;
   width: 30%;
   font-size: 27px;
   background-color: #A1CF6D;
   color: white;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 20px;
   padding-right: 20px;
  }
  .deptDivOnclick {
   background-color: #008000;
  }

以上这篇angularJs使用ng-repeat遍历后选中某一个的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
javascript之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
Extjs学习笔记之七 布局
Jan 08 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
微信小程序自定义胶囊样式
Dec 27 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 #Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 #Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 #Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 #Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 #Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 #Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 #Javascript
You might like
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php实现网站插件机制的方法
2009/11/10 PHP
初识laravel5
2015/03/02 PHP
php比较相似字符串的方法
2015/06/05 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
Python网络编程详解
2017/10/31 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
幼儿评语大全
2014/04/30 职场文书
会计专业自荐书
2014/07/08 职场文书
谢师宴邀请函
2015/02/02 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript