angularjs下ng-repeat點擊元素改變樣式的實現(xiàn)方法
更新時間：2018年09月12日 15:18:53 作者：Maci_yera
今天小編就為大家分享一篇angularjs下ng-repeat點擊元素改變樣式的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1.一個angularjs的學習，了解ng-class的使用技巧；
2.代碼：
html：
<div ng-repeat='myimg in myimgs'>
<img ng-src="{{myimg}}" ng-click="fabricChoose($index)" ng-class="{fabricImg1:$index==fabricIsSelected}">
</div>
css：
.fabricImg1{
border:2px solid blue;
}
js：
$scope.fabricChoose = function(i){
$scope.fabricIsSelected = i;
}
效果就是點擊選擇圖片 就出現(xiàn)藍色border。
3.分析
ng-class的使用技巧就是 ng-class='{name:istrue}' ,在css中寫.name的樣式 ，當istrue布爾值為true時，此元素就會添加.name的樣式，為false時，不增加這個樣式。
以上這篇angularjs下ng-repeat點擊元素改變樣式的實現(xiàn)方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家?guī)硪黄狝ngularJS中的指令全面解析(必看)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了Angularjs為ng-click事件傳遞參數(shù)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
本篇文章主要介紹了Angular中的生命周期鉤子的理解，詳細的介紹了生命周期鉤子和主要的生命周期鉤子，有興趣的可以了解一下2017-07-07
Angular.js中ng-include用法及多標簽頁面的實現(xiàn)方式詳解
這篇文章主要給大家介紹了在Angular.js中ng-include用法及多標簽頁面的實現(xiàn)方式的相關資料，文中通過示例代碼介紹的非常詳細，相信對大家具有一定的參考學習價值，需要的朋友們下面隨著小編一起來學習學習吧。2017-05-05
這篇文章主要為大家詳細介紹了Angular表格神器ui-grid應用的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
AngularJS實現(xiàn)在ng-Options加上index的解決方法
這篇文章主要介紹了AngularJS實現(xiàn)在ng-Options加上index的解決方法,結合實例形式分析了AngularJS在ngOptions添加索引的操作步驟與相關實現(xiàn)技巧,需要的朋友可以參考下2016-11-11
本文主要介紹AngularJS ng-csp 指令,這里對ng-csp 的基礎資料的整理,并附代碼實例和實現(xiàn)效果圖,有需要的小伙伴參考下2016-08-08
這篇文章主要為大家詳細介紹了AngularJS Phonecat實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了AngularJS中transclude用法,詳細分析了transclude的具體功能、使用技巧與相關注意事項,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了AngularJS入門教程（二）：AngularJS模板,本文是系列文章的第三篇,本系列會用一個項目來講解AngularJS的使用,需要的朋友可以參考下2014-12-12