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 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
JS获取时间的方法
Jan 21 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
JavaScript实现原型封装轮播图
Dec 27 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
我的论坛源代码(七)
2006/10/09 PHP
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
浅谈Python 参数与变量
2020/06/20 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
编写strcpy函数
2014/06/24 面试题
活动总结的格式
2014/05/07 职场文书
党支部活动策划方案
2014/08/18 职场文书
实习生矿工检讨书
2014/10/13 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
三十年同学聚会感言
2015/07/30 职场文书
基于Redission的分布式锁实战
2022/08/14 Redis
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers