Angular動(dòng)態(tài)綁定樣式及改變UI框架樣式的方法小結(jié)_第1頁(yè)
Angular動(dòng)態(tài)綁定樣式及改變UI框架樣式的方法小結(jié)_第2頁(yè)
Angular動(dòng)態(tài)綁定樣式及改變UI框架樣式的方法小結(jié)_第3頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第Angular動(dòng)態(tài)綁定樣式及改變UI框架樣式的方法小結(jié)AngularJS是以一個(gè)JavaScript文件形式發(fā)布的，可通過(guò)script標(biāo)簽添加到網(wǎng)頁(yè)中：

scriptsrc="/libs/angular.js/1.4.6/angular.min.js"/script

一：angular動(dòng)態(tài)綁定樣式

舉個(gè)栗子：

tr*ngFor="letdataTroftableData;leti=index"[formGroupName]="i"[ngClass]='isHideClass(i)'

isHideClass(index){

constdata=this.tableData[index];

//if(data['532411351520251904'].value.valueText===''data['532411588670394368'].value.valueText===''

//data['532411670509654016'].value.valueText===''){

//return'hide_tr'

//}

letarr=[];

for(letiindata){

arr.push(data[i]);

if(arr.every((val,idx)={

returnval.value.valueText===''

})){

return'hide_tr'

}

hide_tr是類名，

.hide_tr{

display:none!important;

}

解釋：ngClass要綁定的類名會(huì)在tr根據(jù)數(shù)據(jù)循環(huán)生成html的過(guò)程中調(diào)用組件中定義的isHideClass（）方法，并把i（index）帶過(guò)去讓方法使用

根據(jù)方法邏輯返回的類名去綁定寫好的樣式isHideClass(index){return'hide'}，這時(shí)候這個(gè)ngClass就綁定上了hide這個(gè)類名的樣式

二：angular改UI框架樣式（例子是螞蟻金服的UI框架）

例子：

::ng-deep{

.ant-card-head-title{

font-weight:bold;

.ant-table-placeholder{

display:none;

.ant-card-body{

padding-bottom:0px

.hide_tr{

display:none!important;

}

在要改的樣式前面加上：：ng-deep，就可以改變框架定義好的樣式

以上所述是小編給大家介紹的Angular動(dòng)態(tài)綁定樣式及改

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論