首页 文章

AngularJS ngClass有条件

提问于
浏览 次
445

有没有办法让像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

html css angularjs

10 回答

  • 32

    用这个

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

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

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

    对于Angular 2，请使用此选项

    <div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>
    回复于
  • 93

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

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

    快乐的编码，Nimantha Perera

    回复于
  • 206

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

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

    这是plnkr .

    ngClass指令适用于任何评估truthy或falsey的表达式，有点类似于Javascript表达式，但有一些差异，你可以阅读here . 如果你的条件过于复杂，那么你可以使用一个返回真或假的函数，就像你在第三次尝试时那样 .

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

    ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
    回复于
  • 31

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

    类型1

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

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

    如果 status 值为 0 则应用类 one

    如果 status 值为 1 则应用类 two

    如果 status 值为 2 则应用类 three

    类型2

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

    在哪个类中将按 status 的值应用

    如果 status 的值是 1 or true 那么它会添加类 test_yes

    如果 status 的值是 0 or false 那么它会添加类 test_no

    回复于
  • 60

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

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

    要么

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

    说明：如果状态为活动状态，则将使用类 enabled . 否则，将使用类 disabled .

    列表 [] 用于使用多个类（不只是一个） .

    回复于
  • 5

    在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中的每个状态，该行使用不同的类 .

    回复于
  • 39

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

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

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

    回复于
  • 6

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

    http://jsfiddle.net/ms403Ly8/2/

    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 ";
  }     
}
    回复于
  • 537

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

    希望这会帮助你 .

    回复于

相关问题