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