当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > angularJs使用ng-repeat遍历后选中某一个的方法

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

2018年10月07日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网