angularJs使用ng-repeat遍歷后選中某一個(gè)的方法
更新時(shí)間：2018年09月30日 10:18:45 作者：你不懂程序員的Bug
今天小編就為大家分享一篇angularJs使用ng-repeat遍歷后選中某一個(gè)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
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;"部門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遍歷后選中某一個(gè)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS基礎(chǔ) ng-selected 指令簡單示例
本文主要介紹AngularJS ng-selected 指令,這里對(duì)ng-selected 指令的基礎(chǔ)資料做了詳細(xì)介紹，并附有示例代碼，有需要的小伙伴可以參考下2016-08-08
小談angular ng deploy的實(shí)現(xiàn)
這篇文章主要介紹了小談angular ng deploy的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例
這篇文章主要介紹了基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
angularjs 指令實(shí)現(xiàn)自定義滾動(dòng)條效果
橫向商品欄,把原有的滾動(dòng)條改成自定義的樣式,并且給兩邊加上箭頭可以調(diào)整,可以拖動(dòng)商品和滾輪實(shí)現(xiàn)滾動(dòng)條效果,這篇文章主要介紹了angularjs 指令實(shí)現(xiàn)自定義滾動(dòng)條效果,需要的朋友可以參考下2024-03-03
深入解析AngularJS框架中$scope的作用與生命周期
這篇文章主要介紹了AngularJS中$scope的作用與生命周期,包括在DOM中添加controller對(duì)象的相關(guān)用法,需要的朋友可以參考下2016-03-03
Angular8 實(shí)現(xiàn)table表格表頭固定效果
這篇文章主要介紹了Angular8 實(shí)現(xiàn)table表格表頭固定效果，表頭固定，內(nèi)部實(shí)現(xiàn)滾動(dòng)條效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Angular事件之不同組件間傳遞數(shù)據(jù)的方法
這篇文章主要介紹了Angular事件之不同組件間傳遞數(shù)據(jù)的方法，利用Angular Event在不同組件之間傳遞數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
如何在Angular8.0下使用ngx-translate進(jìn)行國際化配置
這篇文章主要介紹了如何在Angular8.0下使用ngx-translate進(jìn)行國際化配置，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Angular2 組件間通過@Input @Output通訊示例
本篇文章主要介紹了Angular2 組件間通過@Input @Output通訊示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Angularjs注入攔截器實(shí)現(xiàn)Loading效果
angularjs作為一個(gè)全ajax的框架，對(duì)于請(qǐng)求，如果頁面上不做任何操作的話，在結(jié)果反回來之前，頁面是沒有任何響應(yīng)的，不像普通的HTTP請(qǐng)求，會(huì)有進(jìn)度條之類2015-12-12