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