angularJs使用ng-repeat遍歷后選中某一個(gè)的方法
更新時(shí)間：2018年09月30日 10:18:45 作者：你不懂程序員的Bug
今天小編就為大家分享一篇angularJs使用ng-repeat遍歷后選中某一個(gè)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
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; //設(shè)置點(diǎn)擊按鈕背景顏色
};
其中：
$scope.deptName = [{name;"部門(mén)1"}，{name;"部門(mén)2"}，{name;"部門(mén)3"}，{name;"部門(mén)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遍歷后選中某一個(gè)的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例
這篇文章主要介紹了Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例的相關(guān)資料,這里提供實(shí)現(xiàn)思路及實(shí)現(xiàn)具體的方法，需要的朋友可以參考下2017-07-07
AngularJS實(shí)踐之使用ng-repeat中$index的注意點(diǎn)
最近通過(guò)客戶的投訴主要到在ng-repeat中使用了$index引發(fā)的一個(gè)bug，下面一起來(lái)看看這個(gè)錯(cuò)誤是如何引發(fā)的, 以及如何避免這種bug產(chǎn)生,然后說(shuō)說(shuō)我們從中得到的經(jīng)驗(yàn)和教訓(xùn)。有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-12-12
AngularJS基于factory創(chuàng)建自定義服務(wù)的方法詳解
這篇文章主要介紹了AngularJS基于factory創(chuàng)建自定義服務(wù)的方法,結(jié)合實(shí)例形式分析了AngularJS使用factory創(chuàng)建自定義服務(wù)的具體步驟、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-05-05
AngularJS基礎(chǔ) ng-mousemove 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-mousemove 指令,這里幫大家整理了ng-mousemove 指令的詳細(xì)資料,并附有示例代碼,有需要的朋友參考下2016-08-08
AngularJs入門(mén)教程之環(huán)境搭建+創(chuàng)建應(yīng)用示例
這篇文章主要介紹了AngularJs入門(mén)教程之環(huán)境搭建+創(chuàng)建應(yīng)用的方法,較為詳細(xì)的分析了AngularJS的功能、下載及應(yīng)用創(chuàng)建方法,需要的朋友可以參考下2016-11-11
AngularJS實(shí)現(xiàn)進(jìn)度條功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)進(jìn)度條功能,結(jié)合具體完整實(shí)例形式分析了AngularJS實(shí)現(xiàn)進(jìn)度條功能的原理、相關(guān)知識(shí)點(diǎn)與注意事項(xiàng),需要的朋友可以參考下2017-07-07
cnpm加速Angular項(xiàng)目創(chuàng)建的方法
這篇文章主要介紹了cnpm加速Angular項(xiàng)目創(chuàng)建的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
AngularJS基礎(chǔ) ng-options 指令詳解
本文主要介紹AngularJS ng-options 指令,這里對(duì)ng-options指令的知識(shí)做了詳細(xì)整理,并附有詳細(xì)的代碼示例,有需要的小伙伴可以參考下2016-08-08
詳解angularJs中關(guān)于ng-class的三種使用方式說(shuō)明
本篇文章主要介紹了angularJs中關(guān)于ng-class的三種使用方式說(shuō)明，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了AngularJS中transclude用法,詳細(xì)分析了transclude的具體功能、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11