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 处理表单元素的代码
Feb 15 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
js实现不重复导入的方法
Mar 02 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
详解Vue路由自动注入实践
Apr 17 Javascript
javascript读取本地文件和目录方法详解
Aug 06 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
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
python登录豆瓣并发帖的方法
2015/07/08 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
小结Python的反射机制
2020/09/28 Python
python中类与对象之间的关系详解
2020/12/16 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
大学毕业感言100字
2014/02/03 职场文书
教师对学生的寄语
2014/04/03 职场文书
十佳青年事迹材料
2014/08/21 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
Django模型层实现多表关系创建和多表操作
2021/07/21 Python