AngularJs：带有多个语句的ngClass

Question

我需要通过一个ng-class定义

添加两个类

一个看起来像

{true: 'bar', false: ''}[someVar === 'bar']

另一个看起来像

{foo: someOtherVar === 'foo'}

如果我加入他们

<div ng-class="{true: 'bar', false: ''}[someVar === 'bar'],{foo: someOtherVar === 'foo'}">

它不起作用。什么是正确的语法？

Answer 1

试试这个：

<div ng-class="{'bar': someVar === 'bar', 'foo': someOtherVar === 'foo'}">

希望，这会有所帮助。

Answer 2

在这里你可以这样做：

<div ng-class="{ 'bar' : someVar === 'bar', 'foo' : someOtherVar === 'bar' }"></div>

为简洁起见，如果你需要添加两个条款并且只检查一个变量，你也可以这样做。

<div ng-class="{ 'bar foo' : expression1 }"></div>

Answer 3

首先需要在引号中放置一个css类，然后在之后使用一个值为true或false的语句。

例如：

<div ng-class="'bar':someVar==='bar', 'foo':someOtherVar ==='foo'>