angular中實現(xiàn)li或者某個元素點擊變色的兩種方法
更新時間：2017年07月27日 11:48:12 作者：趙海辛
本篇文章主要介紹了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;
}
若想要第一個默認(rèn)為有顏色的，則在js里面加如下即可：
$scope.i=1;
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于angular使用TweenMax的相關(guān)問題和解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
angular ng-repeat數(shù)組中的數(shù)組實例
下面小編就為大家?guī)硪黄猘ngular ng-repeat數(shù)組中的數(shù)組實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
Angular基于TypeScript和react、vue相比 Angular更適合中大型企業(yè)級項目，本文通過實例代碼給大家分享Angular環(huán)境搭建及簡單體驗，感興趣的朋友跟隨小編一起學(xué)習(xí)吧2021-05-05
Angular2使用SVG自定義圖表（條形圖、折線圖）組件示例
這篇文章主要介紹了Angular2使用SVG自定義圖表（條形圖、折線圖）組件,涉及Angular結(jié)合svg進(jìn)行圖表繪制的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了monaco?editor在Angular的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了AngularJS 過濾與排序，這里整理了詳細(xì)的資料及簡單實例代碼，有需要的小伙伴可以參考下2016-09-09
spy?是一種檢查函數(shù)是否被調(diào)用或提供自定義返回值的方法,我們可以使用spy?來測試依賴于服務(wù)的組件,并避免實際調(diào)用服務(wù)的方法來獲取值,在本文中,您將學(xué)習(xí)如何在?Angular?項目中使用?Jasmine?spy,需要的朋友可以參考下2024-03-03
本篇文章主要介紹了angular2路由切換改變頁面title的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
Angular7實現(xiàn)拖放Drag?Drop示例詳解
這篇文章主要介紹了Angular7實現(xiàn)拖放Drag?Drop示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-12-12
本篇文章主要介紹了Angularjs的啟動過程分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07