angular中實(shí)現(xiàn)li或者某個(gè)元素點(diǎn)擊變色的兩種方法
本文介紹了angular中實(shí)現(xiàn)li或者某個(gè)元素點(diǎn)擊變色的兩種方法,分享給大家,希望對(duì)大家有幫助
先說(shuō)一種最直接了當(dāng)?shù)牟恍枰猨s控制。
方法一:直接在用ng-class就可以控制:
<p ng-click="state=1;" ng-class="{active:state==1}">浮傷年華</p>
<p ng-click="state=2;" ng-class="{active:state==2}">憂傷說(shuō)笑</p>
在style里面設(shè)置如下:
<style type="text/css">
.active{
color:red;
}
</style>
這樣就會(huì)點(diǎn)哪個(gè)哪個(gè)變色了。
方法二:style同上,hetml如下:
<div ng-controller="active">
<p ng-click="isActive(1)" class="{{i==1?'active':''}}">劇情再美</p>
<p ng-click="isActive(2)" class="{{i==2?'active':''}}">終究是戲</p>
</div>
js代碼如下:
$scope.isActive=function(i){
$scope.i=i;
}
若想要第一個(gè)默認(rèn)為有顏色的,則在js里面加如下即可:
$scope.i=1;
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
angular 實(shí)時(shí)監(jiān)聽input框value值的變化觸發(fā)函數(shù)方法
今天小編就為大家分享一篇angular 實(shí)時(shí)監(jiān)聽input框value值的變化觸發(fā)函數(shù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Angular學(xué)習(xí)筆記之集成三方UI框架、控件的示例
這篇文章主要介紹了Angular學(xué)習(xí)筆記之集成三方UI框架、控件的示例,詳細(xì)的介紹了Material UI、Ag-grid等框架,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03
Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁(yè)代碼
最近一直在學(xué)習(xí)angularjs相關(guān)知識(shí),在學(xué)習(xí)過(guò)程中寫了一個(gè)小demo,下面把代碼思路分享給大家,感興趣的朋友一起學(xué)習(xí)2016-04-04
詳解Angular.js的$q.defer()服務(wù)異步處理
相信大家都知道jquery和angular都有defer服務(wù),這篇文章暫以angular為例談?wù)剛€(gè)人的理解,在文章的最后并附上jquery的阮一峰總結(jié)的defer。有需要的朋友們也可以參考借鑒,下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
使用AngularJS編寫較為優(yōu)美的JavaScript代碼指南
這篇文章主要介紹了使用AngularJS編寫較為優(yōu)美的JavaScript代碼指南,包括控制器和封裝等進(jìn)階技巧上的編程建議,傾力推薦!需要的朋友可以參考下2015-06-06
AngularJs bootstrap搭載前臺(tái)框架——基礎(chǔ)頁(yè)面
本文主要介紹AngularJs bootstrap搭載前臺(tái)框架基礎(chǔ)頁(yè)面的建設(shè),這里整理餓了相關(guān)資料及實(shí)現(xiàn)實(shí)例代碼,有興趣的小伙伴可以參考下2016-09-09
angular ng-model 無(wú)法獲取值的處理方法
今天小編就為大家分享一篇angular ng-model 無(wú)法獲取值的處理方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
詳解Angular2學(xué)習(xí)筆記之Html屬性綁定
本篇文章主要介紹了詳解Angular2學(xué)習(xí)筆記之Html屬性綁定,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Angular5.0 子組件通過(guò)service傳遞值給父組件的方法
這篇文章主要介紹了Angular5.0 子組件通過(guò)service傳遞值給父組件的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別
這篇文章主要介紹了angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09

