如何在AngularJS中有條件地應(yīng)用CSS樣式？Q1。假設(shè)我想要在按下主“刪除”按鈕之前改變用戶標(biāo)記為刪除的每個(gè)“項(xiàng)目”的外觀。（這種直接的視覺反饋應(yīng)該消除了對“你確定嗎？”對話框的諺語的需要。）用戶將檢查復(fù)選框以指示應(yīng)刪除哪些項(xiàng)目。如果未選中復(fù)選框，則該項(xiàng)應(yīng)恢復(fù)為正常狀態(tài)。應(yīng)用或刪除CSS樣式的最佳方法是什么？Q2。假設(shè)我想允許每個(gè)用戶個(gè)性化我的網(wǎng)站的呈現(xiàn)方式。例如，從一組固定的字體大小中選擇，允許用戶可定義的前景色和背景色等。應(yīng)用用戶選擇/輸入的CSS樣式的最佳方法是什么？
3 回答
精慕HU
TA貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個(gè)贊
Angular提供了許多內(nèi)置指令，用于有條件地/動(dòng)態(tài)地操縱CSS樣式：
ng-class - 當(dāng)CSS樣式集是靜態(tài)/提前知道時(shí)使用
ng-style - 在無法定義CSS類時(shí)使用，因?yàn)闃邮街悼赡軙?dòng)態(tài)更改。想想風(fēng)格值的可編程控制。
ng-if - 1.1.2版中的新增功能，如果您只需要檢查單個(gè)條件（修改DOM），請使用代替更詳細(xì)的ng-switch
ng-switch - 使用而不是使用幾個(gè)互斥的ng-shows（修改DOM）
ng-disabled和 ng-readonly - 用于限制表單元素行為
ng-animate - 1.1.4版中的新增功能，用于添加CSS3過渡/動(dòng)畫
正常的“Angular方式”涉及將模型/范圍屬性綁定到將接受用戶輸入/操作（即，使用ng-model）的UI元素，然后將該模型屬性與上述內(nèi)置指令之一相關(guān)聯(lián)。
當(dāng)用戶更改UI時(shí)，Angular將自動(dòng)更新頁面上的關(guān)聯(lián)元素。
Q1聽起來像ng-class的好例子 - CSS樣式可以在類中捕獲。
ng-class接受必須評估為以下之一的“表達(dá)式”：
一串以空格分隔的類名
一組類名
類名的映射/對象為布爾值
假設(shè)您的項(xiàng)目使用某些數(shù)組模型的ng-repeat顯示，并且當(dāng)選中項(xiàng)目的復(fù)選框時(shí)，您想要應(yīng)用pending-delete該類：
<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
... HTML to display the item ...
<input type="checkbox" ng-model="item.checked"></div>上面，我們使用ng-class表達(dá)式＃3 - 類名的映射/對象到布爾值。
Q2聽起來像ng風(fēng)格的好例子 - CSS樣式是動(dòng)態(tài)的，所以我們不能為此定義一個(gè)類。
ng-style接受必須評估為的“表達(dá)式”：
CSS樣式名稱的地圖/對象到CSS值
對于一個(gè)人為的例子，假設(shè)用戶可以在texbox中輸入顏色名稱作為背景顏色（jQuery顏色選擇器會更好）：
<div class="main-body" ng-style="{color: myColor}">
...
<input type="text" ng-model="myColor" placeholder="enter a color name">小提琴兼得以上。
小提琴還包含ng-show和ng-hide的示例。如果選中復(fù)選框，則除了背景顏色變?yōu)榉奂t色外，還會顯示一些文本。如果在文本框中輸入“紅色”，則會隱藏div。
添加回答
舉報(bào)
0/150
提交
取消