如何有条件地在 AngularJS 中应用 CSS 样式?

问题描述

第一季度.假设我想在按下主删除"按钮之前更改用户标记为删除的每个项目"的外观.(这种即时的视觉反馈应该消除对众所周知的你确定吗?"对话框的需要.)用户将选中复选框以指示应删除哪些项目.如果未选中复选框，则该项目应恢复为正常外观.

应用或删除 CSS 样式的最佳方法是什么?

第 2 季度.假设我想允许每个用户个性化我的网站的呈现方式.例如，从一组固定的字体大小中进行选择，允许用户定义前景色和背景色等.

应用用户选择/输入的 CSS 样式的最佳方法是什么?

解决方案

Angular 提供了许多用于有条件地/动态地操作 CSS 样式的内置指令:

• ng-class - 在一组 CSS 样式是静态的/提前已知
• ng-style - 使用时无法定义 CSS 类，因为样式值可能会动态更改.想想样式值的可编程控制.
• ng-show 和 ng-hide - 如果您只需要显示或隐藏，请使用东西(修改CSS)
• ng-if - 1.1.5 版中的新功能，如果您只需要检查单个条件(修改 DOM)，请使用而不是更冗长的 ng-switch
• ng-switch - 使用代替使用几个互斥的 ng-show(修改 DOM)
• ng-disabled 和 ng-readonly - 用于限制表单元素行为
• ng-animate - 1.1.4 版的新功能，用于添加 CSS3 过渡/动画

正常的Angular 方式"涉及将模型/范围属性绑定到将接受用户输入/操作的 UI 元素(即，使用 ng-model)，然后将该模型属性与内置指令之一相关联上文提到的.

当用户更改 UI 时，Angular 会自动更新页面上的关联元素.

Q1 听起来像是 ng-class 的一个好例子——CSS 样式可以在一个类中捕获.

ng-class 接受一个表达式"，它的计算结果必须为以下之一:

1. 一串空格分隔的类名
2. 类名数组
3. 类名到布尔值的映射/对象

假设使用NG-Repeater在某些阵列模型中显示您的项目，并且当检查项目的复选框时，要应用 Pending-Delete 类:

... HTML 显示项目 ...<input type="checkbox" ng-model="item.checked">

上面，我们使用了 ng-class 表达式类型 #3 - 类名到布尔值的映射/对象.

Q2 听起来像是 ng-style 的一个好例子——CSS 样式是动态的，所以我们不能为此定义一个类.

ng-style 接受一个必须评估为的表达式":

1. CSS 样式名称到 CSS 值的映射/对象

举一个人为的例子，假设用户可以在文本框中输入颜色名称作为背景颜色(jQuery 颜色选择器会更好):

...<input type="text" ng-model="myColor" placeholder="输入颜色名称">

Fiddle 用于上述两种情况.

小提琴还包含 ng-show 和 ng-hide 的示例.如果选中复选框，除了背景颜色变为粉红色外，还会显示一些文本.如果在文本框中输入红色"，则 div 将被隐藏.

Q1. Suppose I want to alter the look of each "item" that a user marks for deletion before the main "delete" button is pressed. (This immediate visual feedback should eliminate the need for the proverbial "are you sure?" dialog box.) The user will check checkboxes to indicate which items should be deleted. If a checkbox is unchecked, that item should revert back to its normal look.

What's the best way to apply or remove the CSS styling?

Q2. Suppose I want to allow each user to personalize how my site is presented. E.g., select from a fixed set of font sizes, allow user-definable foreground and background colors, etc.

What's the best way to apply the CSS styling the user selects/inputs?

解决方案

Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically:

• ng-class - use when the set of CSS styles is static/known ahead of time
• ng-style - use when you can't define a CSS class because the style values may change dynamically. Think programmable control of the style values.
• ng-show and ng-hide - use if you only need to show or hide something (modifies CSS)
• ng-if - new in version 1.1.5, use instead of the more verbose ng-switch if you only need to check for a single condition (modifies DOM)
• ng-switch - use instead of using several mutually exclusive ng-shows (modifies DOM)
• ng-disabled and ng-readonly - use to restrict form element behavior
• ng-animate - new in version 1.1.4, use to add CSS3 transitions/animations

The normal "Angular way" involves tying a model/scope property to a UI element that will accept user input/manipulation (i.e., use ng-model), and then associating that model property to one of the built-in directives mentioned above.

When the user changes the UI, Angular will automatically update the associated elements on the page.

---

Q1 sounds like a good case for ng-class -- the CSS styling can be captured in a class.

ng-class accepts an "expression" that must evaluate to one of the following:

1. a string of space-delimited class names
2. an array of class names
3. a map/object of class names to boolean values

Assuming your items are displayed using ng-repeat over some array model, and that when the checkbox for an item is checked you want to apply the pending-delete class:

<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>

Above, we used ng-class expression type #3 - a map/object of class names to boolean values.

---

Q2 sounds like a good case for ng-style -- the CSS styling is dynamic, so we can't define a class for this.

ng-style accepts an "expression" that must evaluate to:

1. an map/object of CSS style names to CSS values

For a contrived example, suppose the user can type in a color name into a texbox for the background color (a jQuery color picker would be much nicer):

<div class="main-body" ng-style="{color: myColor}">
   ...
   <input type="text" ng-model="myColor" placeholder="enter a color name">

---

Fiddle for both of the above.

The fiddle also contains an example of ng-show and ng-hide. If a checkbox is checked, in addition to the background-color turning pink, some text is shown. If 'red' is entered in the textbox, a div becomes hidden.

这篇关于如何有条件地在 AngularJS 中应用 CSS 样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！