我如何有条件地应用CSS样式AngularJS？ [英] How do I conditionally apply CSS styles in AngularJS?
问题描述
Q1。假设我想之前的主要改变每一个项目的外观，为删除的用户标记删除按钮pssed $ P $。 （这个即时视觉反馈应杜绝众所周知的你确定？对话框的需要。）用户将检查复选框来指示哪些项目应该被删除。如果一个复选框被选中，该项目应该恢复到正常的样子。
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.
什么是应用或删除CSS样式的最佳方式？
What's the best way to apply or remove the CSS styling?
Q2。假设我想允许每个用户个性化我的网站是如何psented $ P $。例如，从一组固定的字体大小的选择，允许用户自定义的前景色和背景色等。
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.
什么是应用CSS样式用户选择的最佳方式/投入？
What's the best way to apply the CSS styling the user selects/inputs?
推荐答案
角度提供了大量的内置指令操纵CSS样式有条件地/动态：
Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically:
- 纳克级 - 使用当组CSS样式是静态/知提前
- 纳克式 - 使用时不能定义CSS类，因为样式值可以动态改变。想想样式值的可编程控制。
- NG-显示 和的ng-hide - 使用，如果你只需要显示或隐藏的东西（修改CSS）
- NG-如果 - 在1.1.5版本新，使用，而不是更详细的NG-开关，如果你只需要检查一个条件（修改DOM）
- NG-开关 - 使用而不是用几个互相排斥纳克-shows（修改DOM）
- NG-禁用 和的ng-readonly - 用于限制表单元素行为
- NG-动画 - 新的1.1.4版本，使用添加CSS3过渡/动画
- 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
普通的角办法涉及搭售的模式/范围属性将接受用户的输入/操作（例如，使用NG-模型），然后关联该模型属性内置的指令之一的UI元素上文提到的。
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.
当用户更改UI，角将自动更新页面上的相关元素。
When the user changes the UI, Angular will automatically update the associated elements on the page.
Q1听起来像一个很好的理由纳克级 - 的CSS样式可以在一个类中捕获
Q1 sounds like a good case for ng-class -- the CSS styling can be captured in a class.
纳克级接受一个前pression必须评估下列之一：
ng-class accepts an "expression" that must evaluate to one of the following:
- 空格分隔的类名的字符串
- 类名称的数组
- 类名布尔值的地图/对象
假设你的项目，采用显示的NG-不断重复一些阵列模式，而当一个项目的复选框被选中要应用的挂起，删除类：
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>
上面，我们采用NG-类ex pression型＃3 - 类名布尔值的地图/对象
Above, we used ng-class expression type #3 - a map/object of class names to boolean values.
Q2听起来像一个很好的例子为NG-风格 - 的CSS样式是动态的，所以我们不能定义一个类为这个
Q2 sounds like a good case for ng-style -- the CSS styling is dynamic, so we can't define a class for this.
NG-风格接受一个前pression必须评估为：
ng-style accepts an "expression" that must evaluate to:
- CSS样式名CSS值的映射/对象
对于一个人为的例子，假设用户可以在色彩的名字输入成背景色texbox（一个jQuery颜色选择器会更漂亮）：
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">
小提琴两个以上。
小提琴也包含 NG-展示和纳克隐藏的例子。如果一个复选框被选中，除了背景色车削粉色，一些文本被示出。如果红色在文本框中输入，一个div被隐藏。
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.
这篇关于我如何有条件地应用CSS样式AngularJS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
