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是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
js实现tab切换效果
Feb 16 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
JavaScript 实现页面滚动动画
Apr 24 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
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
python使用any判断一个对象是否为空的方法
2014/11/19 Python
python实现kmp算法的实例代码
2019/04/03 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
教师求职推荐信范文
2013/11/20 职场文书
行政人事岗位职责
2014/03/17 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
民事答辩状范本
2015/05/21 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
基于Python实现股票收益率分析
2022/04/02 Python