在工作中寫ionic項(xiàng)目時(shí)，因?yàn)橛玫膇onic3，與之相搭配的是Angular4，之前不會(huì)，就大致看看，寫項(xiàng)目的時(shí)候遇到再查找。

在寫到etf指數(shù)基金的時(shí)候，有的可以立即搶購(gòu)，有的是封閉期。想實(shí)現(xiàn)這種效果，如下圖：

我就用到了ng-class,兩個(gè)按鈕需要不同的樣式，

<ion-col col-5 text-right><button ion-button (click)="onEvent('onPurchase', data)"[ngClass]="{true:'hactive',false:'hdisable'}[data.isActive]" round>{{data.etfbtn}}</button></ion-col>

我想在父頁(yè)面?zhèn)髦档臅r(shí)候，傳過(guò)來(lái)一個(gè)isActive參數(shù)，值為true或者false， 但是后臺(tái)給的接口才不會(huì)給你這個(gè)數(shù)據(jù)，所以得直接預(yù)判,用*ngIf：

<ion-col col-5 text-right><button ion-button (click)="onEvent('onPurchase', data)" class="hactive" *ngIf="data.etfbtn=='立即搶購(gòu)'" round>{{data.etfbtn}}</button><button ion-button (click)="onEvent('onPurchase', data)" class="hdisable" *ngIf="data.etfbtn=='封閉期'" round>{{data.etfbtn}}</button> </ion-col>
以上兩段代碼都是相同的效果，但是ng-class通過(guò)對(duì)象數(shù)組只有true和false兩種狀態(tài)，有些局限，*ngIf可以寫好多種， 但是相同代碼要重復(fù)寫，不好看，代碼冗余；我在網(wǎng)上也查到了其他做法，可以試試； 第三種：通過(guò)key/value <div ng-controller="firstController"><div ng-class="{'change1':select,'change2':choice,'change3':lala}">{{data.item}}</div> </div><script>var app=angular.module("myModule",[]);app.controller('firstController',function($scope){$scope.select=true;$scope.lala=true;})</script>哈哈，每天進(jìn)步一點(diǎn)點(diǎn),^_^
鏈接是http://www.jb51.net/article/92775.htm

總結(jié)

以上是生活随笔為你收集整理的AngularJS中关于ng-class和*ngIf指令的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。