如何在AngularJS中有條件地應用CSS樣式？Q1。假設我想要在按下主“刪除”按鈕之前改變用戶標記為刪除的每個“項目”的外觀。（這種直接的視覺反饋應該消除了對“你確定嗎？”對話框的諺語的需要。）用戶將檢查復選框以指示應刪除哪些項目。如果未選中復選框，則該項應恢復為正常狀態。應用或刪除CSS樣式的最佳方法是什么？Q2。假設我想允許每個用戶個性化我的網站的呈現方式。例如，從一組固定的字體大小中選擇，允許用戶可定義的前景色和背景色等。應用用戶選擇/輸入的CSS樣式的最佳方法是什么？
3 回答
精慕HU
TA貢獻1845條經驗 獲得超8個贊
Angular提供了許多內置指令，用于有條件地/動態地操縱CSS樣式：
ng-class - 當CSS樣式集是靜態/提前知道時使用
ng-style - 在無法定義CSS類時使用，因為樣式值可能會動態更改。想想風格值的可編程控制。
ng-if - 1.1.2版中的新增功能，如果您只需要檢查單個條件（修改DOM），請使用代替更詳細的ng-switch
ng-switch - 使用而不是使用幾個互斥的ng-shows（修改DOM）
ng-disabled和 ng-readonly - 用于限制表單元素行為
ng-animate - 1.1.4版中的新增功能，用于添加CSS3過渡/動畫
正常的“Angular方式”涉及將模型/范圍屬性綁定到將接受用戶輸入/操作（即，使用ng-model）的UI元素，然后將該模型屬性與上述內置指令之一相關聯。
當用戶更改UI時，Angular將自動更新頁面上的關聯元素。
Q1聽起來像ng-class的好例子 - CSS樣式可以在類中捕獲。
ng-class接受必須評估為以下之一的“表達式”：
一串以空格分隔的類名
一組類名
類名的映射/對象為布爾值
假設您的項目使用某些數組模型的ng-repeat顯示，并且當選中項目的復選框時，您想要應用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表達式＃3 - 類名的映射/對象到布爾值。
Q2聽起來像ng風格的好例子 - CSS樣式是動態的，所以我們不能為此定義一個類。
ng-style接受必須評估為的“表達式”：
CSS樣式名稱的地圖/對象到CSS值
對于一個人為的例子，假設用戶可以在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的示例。如果選中復選框，則除了背景顏色變為粉紅色外，還會顯示一些文本。如果在文本框中輸入“紅色”，則會隱藏div。
- 3 回答
- 0 關注
- 788 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消