Angular動態(tài)綁定樣式及改變UI框架樣式的方法小結(jié)
AngularJS 簡介
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標(biāo)簽添加到 HTML 頁面。
AngularJS 通過 指令 擴展了 HTML，且通過 表達(dá)式 綁定數(shù)據(jù)到 HTML。
AngularJS 是一個 JavaScript 框架
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。
AngularJS 是以一個 JavaScript 文件形式發(fā)布的，可通過 script 標(biāo)簽添加到網(wǎng)頁中：
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
一：angular動態(tài)綁定樣式
舉個栗子：
<tr *ngFor="let dataTr of tableData;let i = index" [formGroupName]="i" [ngClass]='isHideClass(i)'>
isHideClass(index){
const data = this.tableData[index];
// if(data['532411351520251904'].value.valueText===''&&data['532411588670394368'].value.valueText===''
// &&data['532411670509654016'].value.valueText==='') {
// return 'hide_tr'
// }
let arr = [];
for (let i in data) {
arr.push(data[i]);
}
if(arr.every((val,idx)=>{
return val.value.valueText === ''
})){
return 'hide_tr'
}
}
hide_tr是類名，
.hide_tr{
display: none !important;
}
解釋：ngClass要綁定的類名會在tr根據(jù)數(shù)據(jù)循環(huán)生成html的過程中調(diào)用組件中定義的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，就可以改變框架定義好的樣式
總結(jié)
以上所述是小編給大家介紹的Angular動態(tài)綁定樣式及改變UI框架樣式的方法小結(jié)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
下面小編就為大家分享一篇AngularJS中重新加載當(dāng)前路由頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
使用Angular 6創(chuàng)建各種動畫效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動畫。我們將通過本文學(xué)習(xí)到如何使用Angular 6來創(chuàng)建各種動畫效果。在此，我們將使用Visual Studio Code來進行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
Angular實現(xiàn)防抖和節(jié)流的示例代碼
這篇博客主要是詳細(xì)介紹兩種常用Angular實現(xiàn)防抖和節(jié)流的方法：使用RxJS操作符和使用Angular自帶的工具,文中通過代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了AngularJS上拉加載問題解決方法的相關(guān)資料,該問題在項目中一直存在，小編給大家分享解決辦法，需要的朋友可以參考下2016-05-05
這篇文章主要介紹了angularJS中$apply()方法詳解,需要的朋友可以參考下2015-01-01
Angular.js中$apply()和$digest()的深入理解
相信大家都知道$digest()和$apply()是AngularJS中的兩個核心并且有時候容易引人誤解的部分。我們需要深入理解這兩者是如何運作的，從而才能理解AngularJS本身是如何運作的。本文的目的就是介紹$digest()和$apply()是如何確確實實的對你有用的。下面來一起看看吧。2016-10-10
Angular.js前臺傳list數(shù)組由后臺spring MVC接收數(shù)組示例代碼
這篇文章主要給大家介紹了關(guān)于Angular.js前臺傳list數(shù)組之后，由后臺spring MVC接收數(shù)組的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要介紹了Angular開發(fā)實踐之服務(wù)端渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
今天小編就為大家分享一篇angular4強制刷新視圖的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
深究AngularJS中ng-drag、ng-drop的用法
本篇文章主要介紹了深究AngularJS中ng-drag、ng-drop的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06