css - 如何有条件地在 AngularJS 中应用 CSS 样式？

Question

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

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

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

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

Answer 1

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

• ng-class - 当 CSS 样式集是静态的/提前知道时使用
• ng-style - 当您无法定义 CSS 类时使用，因为样式值可能会动态变化。想想样式值的可编程控制。
• ng-show和ng-hide - 如果您只需要显示或隐藏某些内容（修改 CSS），请使用
• ng-if - 1.1.5 版中的新增功能，如果您只需要检查单个条件（修改 DOM），请使用而不是更详细的 ng-switch
• ng-switch - 使用而不是使用几个互斥的 ng-shows（修改 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-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接受一个“表达式”，它必须计算为：

1. 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。

Answer 2

当我已经将一个类应用于整个表时（例如，应用于奇数行的颜色），我在表元素内应用类时发现了问题<myClass tbody tr:nth-child(even) td>。似乎当您使用Developer Tools检查元素时，element.style没有指定样式。因此ng-class，我没有使用 using ，而是尝试使用 using 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是我正在评估的内容，在每种情况下，我都会<td>根据myvar值对每个样式应用一个样式，这会覆盖 CSS 类为整个表应用的当前样式。

更新

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

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

基本上，我们需要激活一个ng-class是要应用的类和一个真假陈述。True应用类，而false不应用。所以这里我们对页面的路由和它们之间的一个OR进行了两次检查，所以如果我们在/route_a OR我们在route_b，将应用活动类。

这只是在右侧有一个返回真或假的逻辑函数。

所以在第一个例子中，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>

来自Font Awesome的图标

Answer 3

当不能使用 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

Answer 4

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);
}

Answer 5

这个解决方案对我有用

<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>

Answer 6

您可以使用三元表达式。有两种方法可以做到这一点：

<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>

或者...

<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>

Answer 7

当您需要一个或两个属性的简单 css 样式时，另一种选择：

看法：

<tr ng-repeat="element in collection">
    [...amazing code...] 
    <td ng-style="{'background-color': getTrColor(element.myvar)}">
        {{ element.myvar }}
    </td>
    [...more amazing code...]
</tr>

控制器：

$scope.getTrColor = function (colorIndex) {
    switch(colorIndex){
        case 0: return 'red';
        case 1: return 'green';
        default: return 'yellow';
    }
};

Answer 8

请参阅以下示例

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

Answer 9

从 AngularJS v1.2.0rc 开始，ng-class甚至ng-attr-class在 SVG 元素上都失败了（它们确实更早地工作，即使在 class 属性中使用普通绑定）

具体来说，这些现在都不起作用：

ng-class="current==this_element?'active':' ' "
ng-attr-class="{{current==this_element?'active':' '}}"
class="class1 class2 .... {{current==this_element?'active':''}}"

作为一种解决方法，我必须使用

ng-attr-otherAttr="{{current==this_element?'active':''}}"

然后使用样式

[otherAttr='active'] {
   ... styles ...
}

Answer 10

有条件地应用样式的另一种（将来）方法是有条件地创建范围样式

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

</style>

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

Answer 11

好吧，我建议您使用返回true或false的函数检查控制器中的条件。

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

并在您的控制器中检查条件

$scope.getTodayForHighLight = function(today, date){
    return (today == date);
}

Answer 12

我最近发现还有一个选项可能对某些人有用，因为它允许您更改样式元素中的 CSS 规则 - 从而避免重复使用 ng-style、ng-class 等角度指令的需要， ng-show、ng-hide、ng-animate 等。

此选项使用具有服务变量的服务，这些服务变量由控制器设置并由我称为“自定义样式”的属性指令监视。这个策略可以以多种不同的方式使用，我试图用这个fiddle提供一些一般性的指导。

var app = angular.module('myApp', ['ui.bootstrap']);
app.service('MainService', function(){
    var vm = this;
});
app.controller('MainCtrl', function(MainService){
    var vm = this;
    vm.ms = MainService;
});
app.directive('customStyle', function(MainService){
    return {
        restrict : 'A',
        link : function(scope, element, attr){
            var style = angular.element('<style></style>');
            element.append(style);
            scope.$watch(function(){ return MainService.theme; },
                function(){
                    var css = '';
                    angular.forEach(MainService.theme, function(selector, key){
                        angular.forEach(MainService.theme[key], function(val, k){
                            css += key + ' { '+k+' : '+val+'} ';
                        });                        
                    });
                    style.html(css);
                }, true);
        }
    };
});

Answer 13

需要注意的一件事是 - 如果 CSS 样式有破折号 - 您必须删除它们。所以如果要设置background-color，正确的方法是：

ng-style="{backgroundColor:myColor}" 

Answer 14

这是我有条件地在禁用按钮上应用灰色文本样式的方法

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  styleUrls: [ './app.component.css' ],
  template: `
  <button 
    (click)='buttonClick1()' 
    [disabled] = "btnDisabled"
    [ngStyle]="{'color': (btnDisabled)? 'gray': 'black'}">
    {{btnText}}
  </button>`
})
export class AppComponent  {
  name = 'Angular';
  btnText = 'Click me';
  btnDisabled = false;
  buttonClick1() {
    this.btnDisabled = true;
    this.btnText = 'you clicked me';
    setTimeout(() => {
      this.btnText = 'click me again';
      this.btnDisabled = false
      }, 5000);
  }
}

这是一个工作示例：
https ://stackblitz.com/edit/example-conditional-disable-button?file=src%2Fapp%2Fapp.component.html