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库 开发规则
Jan 31 Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
WebPack基础知识详解
Jan 16 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
基于jquery库的tab新形式使用
2012/11/16 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
iView框架问题整理小结
2018/10/16 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python学习笔记之解析json的方法分析
2017/04/21 Python
Pandas中resample方法详解
2019/07/02 Python
python可以用哪些数据库
2020/06/22 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
银行会计职员个人的自我评价
2013/09/29 职场文书
派出所所长先进事迹
2014/05/19 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
Python实现简繁体转换
2021/06/07 Python
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python