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 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
js实现简单商品筛选功能
Feb 02 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
python中正则表达式的使用详解
2014/10/17 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
python查看数据类型的方法
2019/10/12 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
制定岗位职责的原则
2013/11/08 职场文书
《胡杨》教学反思
2014/02/16 职场文书
班级德育工作实施方案
2014/02/21 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
出纳岗位职责范本
2015/03/31 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP