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 相关文章推荐
分页栏的web标准实现
Nov 01 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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
晶体管来复再生式二管收音机
2021/03/02 无线电
8个必备的PHP功能开发
2015/10/02 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
Javascript的一种模块模式
2010/09/08 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
python实现单机五子棋
2020/08/28 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
编辑个人求职信范文
2013/09/21 职场文书
会计系毕业个人自荐信格式
2013/09/23 职场文书
企业给企业的表扬信
2014/01/13 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2014年医务科工作总结
2014/12/18 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python