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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

舉個栗子：

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要綁定的類名會在tr根據(jù)數(shù)據(jù)循環(huán)生成html的過程中調用組件中定義的isHideClass（）方法，并把i（index）帶過去讓方法使用

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

二：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動態(tài)綁定樣式及改

溫馨提示

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

評論

0/150

提交評論