AngularJS的ngClass条件

有没有办法让ng-class这样的表达式成为条件表达式?

例如，我尝试过以下方法:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

这段代码的问题是，不管obj是什么。Value1是，类test总是应用于元素。这样做:

<span ng-class="{test: obj.value2}">test</span>

只要obj。Value2不等于真值，该类未应用。现在我可以通过这样做来解决第一个例子中的问题:

<span ng-class="{test: checkValue1()}">test</span>

其中checkValue1函数是这样的:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

我只是想知道这是不是ng级的工作方式。我还建立了一个自定义指令，我想做类似的事情。然而，我找不到一种方法来观看一个表情(也许这是不可能的，这就是为什么它这样工作的原因)。

这里有一个plnkr说明我的意思。

当前回答

使用这个

<div ng-class="{states}[condition]"></div>

例如，如果条件为[2 == 2]，则状态为{true: '…'， false: '…'}

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

其他回答

我将向您展示动态应用ng-class的两个方法

步骤1

通过使用三元运算符

<div ng-class="condition?'class1':'class2'"></div>

输出

如果你的条件为真，那么class1将应用到你的元素，否则将应用class2。

缺点

当您尝试在运行时更改条件值时，该类将以某种方式不会更改。因此，如果你有动态类更改的要求，我建议你去step2。

步骤2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

输出

如果你的条件与value1匹配，那么class1将被应用到你的元素，如果与value2匹配，那么class2将被应用，以此类推。动态类更改可以很好地使用它。

希望这对你有所帮助。

有一个简单的方法，你可以使用html类属性和速记if/else。没必要把它弄得这么复杂。只需使用下面的方法。

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

你的第一次尝试几乎是正确的，它应该工作没有引号。

{test: obj.value1 == 'someothervalue'}

这是一个硬币。

ngClass指令将适用于任何计算true或false的表达式，有点类似于Javascript表达式，但有一些不同，你可以在这里阅读。如果条件太复杂，那么可以使用返回真值或假值的函数，就像在第三次尝试中所做的那样。

补充一下:您还可以使用逻辑运算符来形成像这样的逻辑表达式

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

我看到上面的例子，但他们都开始花括号(json地图)。另一种选择是返回基于计算的结果。结果也可以是一个css类名的列表(不仅仅是map)。例子:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

说明:如果状态为active，则将使用enabled类。否则，将使用禁用的类。

列表[]用于使用多个类(而不是一个)。

对于Angular 2，使用这个

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

推荐文章