當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
AngularJS中关于ng-class和*ngIf指令
生活随笔
收集整理的這篇文章主要介紹了
AngularJS中关于ng-class和*ngIf指令
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在工作中寫ionic項目時,因為用的ionic3,與之相搭配的是Angular4,之前不會,就大致看看,寫項目的時候遇到再查找。
在寫到etf指數基金的時候,有的可以立即搶購,有的是封閉期。想實現這種效果,如下圖:
我就用到了ng-class,兩個按鈕需要不同的樣式,
<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>
我想在父頁面傳值的時候,傳過來一個isActive參數,值為true或者false, 但是后臺給的接口才不會給你這個數據,所以得直接預判,用*ngIf:
以上兩段代碼都是相同的效果,但是ng-class通過對象數組只有true和false兩種狀態,有些局限,*ngIf可以寫好多種, 但是相同代碼要重復寫,不好看,代碼冗余;我在網上也查到了其他做法,可以試試; 第三種:通過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>哈哈,每天進步一點點,^_^
鏈接是http://www.jb51.net/article/92775.htm
總結
以上是生活随笔為你收集整理的AngularJS中关于ng-class和*ngIf指令的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 员工平均 1.7 年就跳槽,苹果被评为美
- 下一篇: 英特尔第二季度同比扭亏为盈,三季度展望超