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取得select选择的文本与值的示例
Dec 09 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
原生js编写2048小游戏
Mar 17 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
MutationObserver在页面水印实现起到的作用详解
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
php将数据库导出成excel的方法
2010/05/07 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
jquery.cookie用法详细解析
2013/12/18 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
Vue实现穿梭框效果
2020/09/30 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
python链接Oracle数据库的方法
2015/06/28 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
python更新列表的方法
2015/07/28 Python
python基于http下载视频或音频
2018/06/20 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python解析yaml文件过程详解
2019/08/30 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
一些PHP的面试题
2015/05/06 面试题
用Python写一个for循环的例子
2016/07/19 面试题
师范生自荐信范文
2013/10/06 职场文书
监理员的岗位职责
2013/11/13 职场文书
大学生标准自荐书
2014/06/15 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
化验室安全管理制度
2015/08/06 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫