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的实现回车键Enter切换焦点
Sep 14 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
vue路由跳转传参数的方法
May 06 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 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简洁函数小结
2011/08/12 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
如何打开php的gd2库
2017/02/09 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
Python使用遗传算法解决最大流问题
2018/01/29 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
python如何使用腾讯云发送短信
2020/09/17 Python
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
卖房授权委托书样本
2014/10/05 职场文书
2014年班主任工作总结
2014/11/08 职场文书
学期个人工作总结
2015/02/13 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
入党心得体会
2019/06/20 职场文书
手写实现JS中的new
2021/11/07 Javascript
Python必备技巧之函数的使用详解
2022/04/04 Python
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle