如何在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方式"涉及将模型/范围属性绑定到将接受用户输入/操作(即,使用ng-model)的UI元素,然后将该模型属性与上述内置指令之一相关联.

当用户更改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风格的好例子 - 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,我尝试使用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类为整个表应用的当前样式.

UPDATE

例如,如果要将表应用于表,则在访问页面或其他情况时,可以使用以下结构:

<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由三个语句决定.如果所有这些都是假的,则不应用样式,但是遵循我们的逻辑,将至少应用一个,因此,逻辑表达式将检查哪个变量比较为真,并且因为非空数组始终为真,所以将数组作为返回并且只有一个为true,考虑到我们使用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

当您需要一个或两个属性的简单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 7

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

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

要么...

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

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>