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ì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
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)文章
這篇文章主要介紹了angularjs的一些優(yōu)化小技巧,本文總結(jié)了5種優(yōu)化技巧,如一次綁定、盡可能少調(diào)用 ng-repeat、盡量在指令里寫原生語(yǔ)法、頁(yè)面內(nèi)盡量少用filters等,需要的朋友可以參考下2014-12-12
ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕
本篇文章主要介紹了ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-04-04
教你用AngularJS框架一行JS代碼實(shí)現(xiàn)控件驗(yàn)證效果
簡(jiǎn)單來(lái)說(shuō)Angular.js是google開(kāi)發(fā)者設(shè)計(jì)和開(kāi)發(fā)的一套前端開(kāi)發(fā)框架，幫助你簡(jiǎn)化前端開(kāi)發(fā)的負(fù)擔(dān)。到底能簡(jiǎn)化到什么程度呢，今天我們來(lái)看下，一行代碼實(shí)現(xiàn)控件驗(yàn)證效果，有木有嚇尿？2014-06-06
詳解AngularJs中$sce與$sceDelegate上下文轉(zhuǎn)義服務(wù)
這篇文章給大家詳細(xì)介紹了AngularJs提供的嚴(yán)格上下文轉(zhuǎn)義服務(wù)$sce與$sceDelegate，文中介紹的很詳細(xì)，有需要的朋友們可以參考借鑒。2016-09-09
本篇文章主要介紹了詳解angularjs利用ui-route異步加載組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
AngularJS的ng-repeat指令與scope繼承關(guān)系實(shí)例詳解
這篇文章主要介紹了AngularJS的ng-repeat指令與scope繼承關(guān)系,結(jié)合實(shí)例形式通過(guò)ng-repeat指令詳細(xì)分析了scope繼承關(guān)系,需要的朋友可以參考下2017-01-01
AngularJs IE Compatibility 兼容老版本IE
本文主要介紹AngularJs IE Compatibility 兼容老版本IE的問(wèn)題及解決辦法，有興趣的小伙伴可以參考下2016-09-09
AngularJs最重要也是最難理解的模塊之一就是它的指令（directive）了，自定義指令配置有很多個(gè)參數(shù)，下面這篇文章主要介紹了關(guān)于Angular.js指令中scope類型的幾種特殊情況，需要的朋友可以參考下。2017-02-02
本篇文章主要介紹了Angular如何引入第三方庫(kù)的方法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12