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

Q1。假设我想要改变用户在按下主“删除”按钮之前标记为删除的每个“项目”的外观。(这种即时的视觉反馈应该消除了“你确定吗?”对话框的需要。)用户将选中复选框以指示应该删除哪些项。如果复选框未选中，则该项应恢复其正常外观。

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

Q2。假设我想允许每个用户个性化我的站点的呈现方式。例如，从固定的字体大小中选择，允许用户自定义前景色和背景颜色等。

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

当前回答

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

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

正常的“Angular方式”包括将模型/作用域属性绑定到接受用户输入/操作的UI元素上(即使用ng-model)，然后将该模型属性关联到上面提到的内置指令之一。

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

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

ng类接受一个“表达式”，该表达式必须求值为以下其中之一:

用空格分隔的类名字符串类名数组类名到布尔值的映射/对象

假设你的项目是使用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-style的一个好例子——CSS样式是动态的，所以我们不能为此定义一个类。

Ng-style接受一个必须求值为的“表达式”:

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

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

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

为以上两种乐器演奏小提琴。

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

2012-12-11 03:39:53

其他回答

参见下面的示例

<!DOCTYPE html>
    <html ng-app>
    <head>
    <title>Demo Changing CSS Classes Conditionally with Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="res/js/controllers.js"></script>

    <style>

    .checkboxList {
        border:1px solid #000;
        background-color:#fff;
        color:#000;
        width:300px;
        height: 100px;
        overflow-y: scroll;
    }

    .uncheckedClass {
       background-color:#eeeeee;
       color:black;
    }
    .checkedClass {
        background-color:#3ab44a;
        color:white;
    }
    </style>

    </head>
    <body ng-controller="TeamListCtrl">
    <b>Teams</b>
    <div id="teamCheckboxList" class="checkboxList">

    <div class="uncheckedClass" ng-repeat="team in teams" ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}">

    <label>
    <input type="checkbox" ng-model="team.isChecked" />
    <span>{{team.name}}</span>
    </label>
    </div>
    </div>
    </body>
    </html>

2014-11-13 06:58:16

当ng-class不能使用时(例如在样式化SVG时)，这工作得很好:

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(我认为你需要使用最新的不稳定Angular才能使用ng-attr-，我目前使用的是1.1.4)

我已经发表了一篇关于AngularJS+SVG的文章。它讨论了这个问题和许多其他问题。http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

2013-05-21 12:09:15

span class="circle circle-{{selectcss(document.Extension)}}">

和代码

$scope.selectcss = function (data) {
    if (data == '.pdf')
        return 'circle circle-pdf';
    else
        return 'circle circle-small';
};

css

.circle-pdf {
    width: 24px;
    height: 24px;
    font-size: 16px;
    font-weight: 700;
    padding-top: 3px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background-image: url(images/pdf_icon32.png);
}

2014-09-09 19:05:07

当我有一个类已经应用到整个表时，我在表元素中应用类时发现了问题(例如，应用到奇数行的颜色<myClass tbody tr:n -child(even) td>)。当您使用开发人员工具检查元素时，元素。样式没有指定样式。因此，我没有使用ng-class，而是尝试使用ng-style，在这种情况下，新的CSS属性确实出现在element.style中。这段代码对我来说很有用:

<tr ng-repeat="element in collection">

    [...amazing code...]

    <td ng-style="myvar === 0 && {'background-color': 'red'} ||
                  myvar === 1 && {'background-color': 'green'} ||
                  myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>

    [...more amazing code...]

</tr>

Myvar是我正在评估的东西，在每种情况下，我根据Myvar值对每个<td>应用一个样式，它覆盖了CSS类为整个表应用的当前样式。

更新

如果你想将一个类应用到表中，例如，当访问一个页面或在其他情况下，你可以使用这个结构:

<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">

基本上，激活ng-class所需要的是要应用的类和true或false语句。True应用该类，false不应用该类。所以这里我们有两次对页面路由的检查，它们之间有一个OR，所以如果我们在/route_a OR中，我们在route_b中，活动类将被应用。

它只需要在右边有一个逻辑函数，返回true或false。

所以在第一个例子中，ng-style有三个条件语句。如果它们都为假，则不应用任何样式，但按照我们的逻辑，至少有一个将被应用，因此，逻辑表达式将检查哪个变量比较为真，因为非空数组总是为真，将留下一个数组作为返回，只有一个为真，考虑到我们对整个响应使用OR，剩余的样式将被应用。

顺便说一下，我忘了给你isActive()函数:

$rootScope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
};

新的更新

这是我觉得很有用的东西。当你需要应用一个依赖于变量值的类时，例如，一个依赖于div内容的图标，你可以使用下面的代码(在ng-repeat中非常有用):

<i class="fa" ng-class="{ 'fa-github'   : type === 0,
                          'fa-linkedin' : type === 1,
                          'fa-skype'    : type === 2,
                          'fa-google'   : type === 3 }"></i>

字体图标

2013-09-20 06:57:08

还有一种(将来)有条件地应用样式的方法是有条件地创建有作用域的样式

<style scoped type="text/css" ng-if="...">

</style>

但是现在只有FireFox支持范围样式。

2014-08-19 13:39:29

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

推荐文章

最新文章

标签