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遍歷后選中某一個的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Angularjs的$http異步刪除數(shù)據(jù)詳解及實例
這篇文章主要介紹了Angularjs的$http異步刪除數(shù)據(jù)詳解及實例的相關資料,這里提供實現(xiàn)思路及實現(xiàn)具體的方法，需要的朋友可以參考下2017-07-07
AngularJS實踐之使用ng-repeat中$index的注意點
最近通過客戶的投訴主要到在ng-repeat中使用了$index引發(fā)的一個bug，下面一起來看看這個錯誤是如何引發(fā)的, 以及如何避免這種bug產(chǎn)生,然后說說我們從中得到的經(jīng)驗和教訓。有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
AngularJS基于factory創(chuàng)建自定義服務的方法詳解
這篇文章主要介紹了AngularJS基于factory創(chuàng)建自定義服務的方法,結合實例形式分析了AngularJS使用factory創(chuàng)建自定義服務的具體步驟、操作技巧與相關注意事項,需要的朋友可以參考下2017-05-05
AngularJS基礎 ng-mousemove 指令簡單示例
本文主要介紹AngularJS ng-mousemove 指令,這里幫大家整理了ng-mousemove 指令的詳細資料,并附有示例代碼,有需要的朋友參考下2016-08-08
AngularJs入門教程之環(huán)境搭建+創(chuàng)建應用示例
這篇文章主要介紹了AngularJs入門教程之環(huán)境搭建+創(chuàng)建應用的方法,較為詳細的分析了AngularJS的功能、下載及應用創(chuàng)建方法,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了AngularJS實現(xiàn)進度條功能,結合具體完整實例形式分析了AngularJS實現(xiàn)進度條功能的原理、相關知識點與注意事項,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了cnpm加速Angular項目創(chuàng)建的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本文主要介紹AngularJS ng-options 指令,這里對ng-options指令的知識做了詳細整理,并附有詳細的代碼示例,有需要的小伙伴可以參考下2016-08-08
詳解angularJs中關于ng-class的三種使用方式說明
本篇文章主要介紹了angularJs中關于ng-class的三種使用方式說明，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了AngularJS中transclude用法,詳細分析了transclude的具體功能、使用技巧與相關注意事項,需要的朋友可以參考下2016-11-11