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