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说明我的意思。

当前回答

Angular的语法是使用:操作符来执行与if修饰符等价的操作

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

将clearfix类添加到偶数行。尽管如此，表达式可以是我们在正常的if条件下可以拥有的任何东西，它应该被求值为真或假。

2014-03-26 19:00:07

其他回答

Angular的语法是使用:操作符来执行与if修饰符等价的操作

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

将clearfix类添加到偶数行。尽管如此，表达式可以是我们在正常的if条件下可以拥有的任何东西，它应该被求值为真或假。

2014-03-26 19:00:07

在ng-repeat中使用ng-class

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

对于任务中的每个状态。Status为该行使用不同的类。

2014-07-28 23:46:33

Angular JS在ng-class Directive中提供了这个功能。你可以在里面放置条件，也可以赋值条件类。您可以通过两种不同的方式来实现这一点。

1型

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

在此代码中，类将根据状态值的值应用

如果status值为0，则应用类1

如果status值为1，则应用类2

如果status值为2，则应用类3

2型

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

将在哪个类中应用状态值

如果status值为1或true，则添加类test_yes

如果status值为0或false，则添加类test_no

2015-07-08 09:11:03

对于Angular 2，使用这个

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

2018-03-26 12:32:47

使用这个

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

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

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

2017-01-29 18:46:39

AngularJS的ngClass条件

推荐文章

最新文章

标签