在角度范围内添加默认类和类？答案

【问题标题】：Add default class and class from scope in angular?在角度范围内添加默认类和类？
【发布时间】：2014-01-15 22:43:53
【问题描述】：

我想在 Angular 中添加两个类。一个始终相同，一个由范围检索。

我试过这个：

<label class="checkbox" ng-switch-when="checkbox" ng-class="{{field.name}}">
<input
    name="{{field.key}}"
    type="checkbox"
    value="Option 1"
    ng-model="$storage[field.key]"
>
    {{field.label}}
</label>

它在 DOM 中生成了两类属性。

这个：

<label ng-switch-when="checkbox" ng-class="{{field.name}} checkbox">
<input
    name="{{field.key}}"
    type="checkbox"
    value="Option 1"
    ng-model="$storage[field.key]"
>
    {{field.label}}
</label>

根本没有向类属性添加任何东西

【问题讨论】：

ng-class="['checkbox', field.name]"

标签： angularjs

【解决方案1】：

我在这里为您整理了一个关于 plunker 的简单示例 (http://plnkr.co/edit/H7JstMuvHSlwPSy3raPO?p=preview)。例子的核心是：

<div ng-class="{red: showRed, bold: showBold}">Hello Plunker!</div>

要使这个示例正常运行，您需要在控制器中定义两个布尔值“showRed”和“showBold”。它非常简单，但控制器代码如下所示：

var app = angular.module("App", []);
app.controller("ctrl", function($scope){
  $scope.showRed = true;
  $scope.showBold = true;
});

当您切换这些布尔值 true/false 时，类将打开和关闭元素。为了便于查看，我在示例中添加了两个按钮，这样您就可以在不更改代码的情况下进行切换。希望这可以帮助你。祝你好运！

【讨论】：

【解决方案2】：

ng-class 需要一个计算结果为字符串、数组或映射的表达式。顺便提一句。您不需要{{，因为整个字符串已经是一个表达式。

您的第二个表达式无法计算。这就像 JavaScript field.name checkbox 中的一行 - 这不是有效的代码。 field.name + ' checkbox' 会。你可以使用它。

如果你有更多的动态类，数组肯定会更容易使用：

[field.name, someOtherVariable, 'checkbox'].

【讨论】：