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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
JavaScript oncopy事件用法实例解析
May 13 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
JavaScript this关键字的深入详解
Jan 14 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利用事务处理转账问题
2015/04/22 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
python计算圆周率pi的方法
2015/07/11 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
西式婚礼主持词
2014/03/13 职场文书
保密工作责任书
2014/04/16 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
服务行业标语口号
2015/12/26 职场文书
七年级上册生物的课件
2019/08/07 职场文书
业余无线电通联Q语
2022/02/18 无线电