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处理table表格的代码
Dec 06 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 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/02/22 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python生成随机验证码的两种方法
2015/12/22 Python
Python实现完整的事务操作示例
2017/06/20 Python
django缓存配置的几种方法详解
2018/07/16 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Python requests模块session代码实例
2020/04/14 Python
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
影子教师研修方案
2014/06/14 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
2014年客房部工作总结
2014/11/22 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
吃通javascript正则表达式
2021/04/21 Javascript