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 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
基于javascript编写简单日历
May 02 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
JS前端广告拦截实现原理解析
Feb 17 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+ajax 无刷新删除数据
2010/02/20 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
php时间函数用法分析
2016/05/28 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
javascript 事件绑定问题
2011/01/01 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
webpack入门必知必会
2017/01/16 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
鲜果饮品店创业计划书
2014/01/21 职场文书
文秘应届生求职信
2014/07/05 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
学习保证书
2015/01/17 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
小学语文教学反思范文
2016/03/03 职场文书