脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularJs使用ng-repeat遍历后选中某一个

angularJs使用ng-repeat遍历后选中某一个的方法

 更新时间：2018年09月30日 10:18:45   作者：你不懂程序员的Bug  
今天小编就为大家分享一篇angularJs使用ng-repeat遍历后选中某一个的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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遍历后选中某一个的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Angularjs的$http异步删除数据详解及实例

    Angularjs的$http异步删除数据详解及实例

    这篇文章主要介绍了Angularjs的$http异步删除数据详解及实例的相关资料,这里提供实现思路及实现具体的方法，需要的朋友可以参考下
    2017-07-07
  • AngularJS实践之使用ng-repeat中$index的注意点

    AngularJS实践之使用ng-repeat中$index的注意点

    最近通过客户的投诉主要到在ng-repeat中使用了$index引发的一个bug，下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我们从中得到的经验和教训。有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12
  • AngularJS基于factory创建自定义服务的方法详解

    AngularJS基于factory创建自定义服务的方法详解

    这篇文章主要介绍了AngularJS基于factory创建自定义服务的方法,结合实例形式分析了AngularJS使用factory创建自定义服务的具体步骤、操作技巧与相关注意事项,需要的朋友可以参考下
    2017-05-05
  • AngularJS基础 ng-mousemove 指令简单示例

    AngularJS基础 ng-mousemove 指令简单示例

    本文主要介绍AngularJS ng-mousemove 指令,这里帮大家整理了ng-mousemove 指令的详细资料,并附有示例代码,有需要的朋友参考下
    2016-08-08
  • AngularJs入门教程之环境搭建+创建应用示例

    AngularJs入门教程之环境搭建+创建应用示例

    这篇文章主要介绍了AngularJs入门教程之环境搭建+创建应用的方法,较为详细的分析了AngularJS的功能、下载及应用创建方法,需要的朋友可以参考下
    2016-11-11
  • AngularJS实现进度条功能示例

    AngularJS实现进度条功能示例

    这篇文章主要介绍了AngularJS实现进度条功能,结合具体完整实例形式分析了AngularJS实现进度条功能的原理、相关知识点与注意事项,需要的朋友可以参考下
    2017-07-07
  • cnpm加速Angular项目创建的方法

    cnpm加速Angular项目创建的方法

    这篇文章主要介绍了cnpm加速Angular项目创建的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • AngularJS基础 ng-options 指令详解

    AngularJS基础 ng-options 指令详解

    本文主要介绍AngularJS ng-options 指令,这里对ng-options指令的知识做了详细整理,并附有详细的代码示例,有需要的小伙伴可以参考下
    2016-08-08
  • 详解angularJs中关于ng-class的三种使用方式说明

    详解angularJs中关于ng-class的三种使用方式说明

    本篇文章主要介绍了angularJs中关于ng-class的三种使用方式说明，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • AngularJS中transclude用法详解

    AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能、使用技巧与相关注意事项,需要的朋友可以参考下
    2016-11-11

最新评论