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 相关文章推荐
100个不能错过的实用JS自定义函数
Mar 05 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 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和ACCESS写聊天室(二)
2006/10/09 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
javascript静态的url如何传递
2007/05/03 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
Python时间戳使用和相互转换详解
2017/12/11 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
Python requests模块cookie实例解析
2020/04/14 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
证婚人经典证婚词
2014/01/09 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
Python闭包的定义和使用方法
2022/04/11 Python