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