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 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 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中Session的概念
2006/10/09 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
js select常用操作控制代码
2010/03/16 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
python操作mysql代码总结
2018/06/01 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
Java程序开发中如何应用线程
2016/03/03 面试题
狼和鹿教学反思
2014/02/05 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
冰雪公主观后感
2015/06/16 职场文书