提问



有没有办法让像ngClass这样的表达式成为条件。例如,我尝试了以下内容:


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


这段代码的问题在于,无论obj.value1是什么,类测试总是应用于元素。这样做:


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


只要obj.value2不等于truthy值,该类就不应用。现在我可以通过这样做解决第一个例子中的问题:


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


checkValue1函数如下所示:


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


我只是想知道这是否是ngClass应该如何工作。我也在构建一个自定义指令,我想做类似的事情。但是我找不到观察表达的方法(也许这是不可能的,也就是为什么它会像这样工作)。


这是一个显示我的意思的plnkr:


http://plnkr.co/edit/iSh0t8swDEyGbh7ylZg2?p=preview[25]

最佳参考


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


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


这是一个plnkr。[26]


ngClass指令将适用于任何评估truthy或falsey的表达式,有点类似于Javascript表达式但有一些差异,你可以在这里阅读。
如果您的条件过于复杂,那么您可以使用返回真实或虚假的函数,就像您在第三次尝试中所做的那样。[27]


只是为了补充:你也可以使用逻辑运算符来形成逻辑表达式


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

其它参考1


在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>


对于task.status中的每个状态,该行使用不同的类。

其它参考2


Angular JS ng-class Directive 中提供此功能。您可以在其中放置条件并分配条件类。你可以通过两种不同的方式实现这一目标。[28]


类型1



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


在此代码类中,将根据 status 值的值应用


如果状态值为 0 ,则应用一个


如果状态值为 1 ,则应用两个


如果状态值为 2 ,则应用课程





类型2



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


将按状态的值应用哪个班级


如果状态值为 1或为真,则会添加类 test_yes


如果状态值为 0或错误,则会添加类 test_no

其它参考3


我在上面看到了很好的例子,但它们都以大括号(json map)开头。另一种选择是根据计算返回结果。结果也可以是css类名列表(不仅仅是map)。例:


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


要么


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


说明:如果状态为Activity状态,则将使用类enabled。否则,将使用类disabled


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

其它参考4


我将向您展示两种可以动态应用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,依此类推。动态类更改可以正常使用它。


希望这会帮助你。

其它参考5


angular语法是使用:运算符来执行等效的 if 修饰符


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


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

其它参考6


有一个简单的方法,您可以使用html类属性和速记if/else。不需要让它如此复杂。只需使用以下方法。


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


快乐的编码,
Nimantha Perera

其它参考7


当有人必须运行复杂的逻辑来决定适当的CSS类时,使用带有ng-class的函数是一个很好的选择。


http://jsfiddle.net/ms403Ly8/2/[29]


HTML:


<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>


CSS:


.testclass { Background: lightBlue}


的JavaScript :


function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

其它参考8


用这个


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


例如,如果条件为[[2 == 2]],则状态为{true:...,false:...}


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

其它参考9


对于Angular 2,请使用此选项


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