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 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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批量去除BOM头内容信息代码
2016/03/11 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
js确定对象类型方法
2012/03/30 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
js实现返回顶部效果
2017/03/10 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
Python的math模块中的常用数学函数整理
2016/02/04 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
python集合是否可变总结
2019/06/20 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
python实现学生成绩测评系统
2020/06/22 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
教师岗位职责范本
2013/12/29 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
齐云山导游词
2015/02/06 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
python实现简单石头剪刀布游戏
2021/10/24 Python
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers