NangularJS NgClass条件

Directive,你想申请课程ng-class条件?

对于例如,我已经尝试了以下内容:

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

The issue with this code is that no matter what obj.value1IS,始终将类测试应用于该元素。这样做:

<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-class发现工作。我也在建立一个自定义指令,在那里我想做类似的事情。但是,我找不到一种观看表达的方法(也许这是不可能的,而且它是这样的原因)。

是A.PLNKR.显示我的意思。

看看这个答案:stackoverflow.com/questions/14788652/...Adrian Neatu
需要引用用破折号的基本:ng-class="'label-success': obj.value1 == 'Ready', 'label-warning': obj.value1 == 'On hold'}"贝伦洗脸盆
We can use more condition with ng-class , see on this blog go.gl/qfeqzwVirender
Related:stackoverflow.com/q/7792652/435605Alikelzin-Kilaka
“带有破折号的课程需要睫毛''''''''''''9 RICHARD

回答 11

  1. 赞同 618

    Your first attempt was almost right, It should work without the quotes.

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

    Here is a PLNKR..

    NgClass指令将与任何评估真实或valsey的任何表达式,一点类似于JavaScript表达,但有一些差异,您可以阅读.如果您的条件过于复杂,那么您可以使用返回真实或valley的函数,就像您的第三次尝试一样。

    要补充:您还可以使用逻辑运算符来形成逻辑表达式

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

    BERTRAND
    谢谢,无论出于什么原因,我虽然是因为这是一个表达式作为对象的价值,但整个事情必须在引号中。RYANZEC
    WRAP课堂名称' otherwise if you want to add more classes or if your class has hyphens or underscores it will not work. ng-class="{'test test-2: obj.value1 === 'value'}"ANDREA TURRI
    @ andrea,你忘记了截止行情:ng-class="{'test test-2': obj.value1 === 'value'}"
    对于Angular2(我试图找到)使用属性(s),如:[class.test]="obj.value1 == 'someotervalue'".Kub1x
    fyi到读者,您也可以括号。ng-class="{danger:!enabled || (type === 'WHEEL' && !isOnline) }Dacoda
  2. 赞同 233

    在NG-REPEATING INESICATION INESICE INSION

    <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用于行使用不同的类。

    abhi
  3. 赞同 116

    angular JS.提供此功能ng课程指令.您可以放置​​条件并分配条件类。您可以用两种不同的方式实现这一目标。

    Type 1

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

    在此代码类将根据值申请Status.Value.

    如果.Status.Value是0 then apply class

    如果.Status.Value是1 then apply class TWO.

    如果.Status.Value是2. then apply class


    Type 2.

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

    在哪个课程将按价值申请Status.

    如果.Status.Value是1或真实 then it will add class Test_yes.

    如果但是Status.Value是0或假 then it will add class Test_no.

    Kaushal Khamar
    这里的状态是什么?COMMONSENSECODE
    Status是您想要根据哪个类进行检查或验证的值。Kaushal Khamar
    在处理多个值时,就像这样更灵活,更疯少人eduardo la Hoz Miranda
    如何为多个类使用它。喜欢,
    Parth Hirpara
    我们在这样的情况下使用它:<div ng-class="{'Image' || 'image': 'image-icon', 'Video' || 'video' || 'aVideo' || 'bVideo' : 'video-icon'}[resource.type]"></div>Chandra Kant Paliwal
  4. 赞同 87

    我看到了上面的一个很棒的例子,但它们都以卷曲括号(JSON地图)开始。另一种选择是基于计算返回结果。结果也可以是CSS类名称列表(不仅仅是映射)。例子:

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

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

    开发:如果状态处于活动状态,则此类enabled用水。否则,班级disabled被使用。

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

    Alikelzin-Kilak
  5. 赞同 52

    这是一种简单的方法,您可以与HTML类属性和速写/ else一起使用。无需使它如此复杂。只需使用以下方法。

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

    Nimantha Harshana Perera
  6. 赞同 37

    I am going to show you two methods by which you can dynamically apply ng-class

    Step-1

    使用三元算子

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

    Output.

    如果您的条件为true,则Class1将应用于您的Element eLASE 2将应用于Class2。

    Disadvantage.

    当您尝试在运行时更改条件值时,课程不某个阶层不会更改。所以我建议你去第2步如果你有这样的要求,就像动态级别的改变一样。

    Step-2

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

    Output.

    if your condition matches with value1 then class1 will be applied to your element, if matches with value2 then class2 will be applied and so on. And dynamic class change will work fine with it.

    Hope this will help you.

    Com
  7. 赞同 36

    angular语法是使用:操作者执行相当于如果.Modifier.

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

    Add Clearfix类偶数行。尽管如此,表达可能是我们可以在正常情况下的任何功能,并且它应该评估为真或假。

    Air sajjad
    nice!此外,内部的ng-repeat,您可以使用$ op ove set class。例如。 ng-class =“$甚至?'偶数':'奇数'”。 NG-Repeim内的其他漂亮Bool是$ First,$ Last,$甚至,$奇数......max
  8. 赞同 16

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

    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 ";
      }     
    }
    

    razan保罗
    我认为这会混淆担忧。控制器应该更摘要,不关心CSS类,而是状态。基于该状态,CSS类应在模板中应用。这种方式,控制器独立于模板,更容易可重复使用。Hubert Grzeskowiak
  9. 赞同 9

    对于角2,使用此

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

    NINAD KULKARNI
    要扩展此,对于Angular 2,您可以使用像这样的数组应用Angular 2,在If / Els的条件下应用类修饰符:[ngClass]="['base-class', thread.isActive ? 'base-class--active' : '']"Matt Rabe
  10. 赞同 9

    使用这一点

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

    for example if the condition is [2 == 2], states are {true: '...', false: '...'}

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

    SEED
    but if i have 3 or more conditions, this wouldn't work? since this will only return true and false conditonsAli Amine
    Conditions意味着真或假。你的意思是超过2个值的东西? @alyAlameen.Seed
  11. 赞同 5

    ng-class核心Angularjs的指令。您可以在其中使用“字符串语法”,“阵列语法”,“评估表达式”,“三元运算符”以及下面描述的更多选项:

    ngClass Using String Syntax

    This is the simplest way to use ngClass. You can just add an Angular variable to ng-class and that is the class that will be used for that element.

    <!-- whatever is typed into this input will be used as the class for the div below -->
    <input type="text" ng-model="textType">
    
    <!-- the class will be whatever is typed into the input box above -->
    <div ng-class="textType">Look! I'm Words!
    

    迪玛示例ngClass Using String Syntax

    NCCLASS使用阵列语法

    此类似于String语法方法,除了您能够应用多个类。

    <!-- both input boxes below will be classes for the div -->
    <input type="text" ng-model="styleOne">
    <input type="text" ng-model="styleTwo">
    
    <!-- this div will take on both classes from above -->
    <div ng-class="[styleOne, styleTwo]">Look! I'm Words!
    

    NCCLASS使用评估表达式

    使用ngclass的更高级方法(以及您可能最多的一个)是评估表达式。这项工作的方式是,如果变量或表达式评估true,您可以应用某个类。如果没有,那么课程将不会应用。

    <!-- input box to toggle a variable to true or false -->
    <input type="checkbox" ng-model="awesome"> Are You Awesome?
    <input type="checkbox" ng-model="giant"> Are You a Giant?
    
    <!-- add the class 'text-success' if the variable 'awesome' is true -->
    <div ng-class="{ 'text-success': awesome, 'text-large': giant }">
    

    ExampleNCCLASS使用评估表达式

    ngClass Using Value

    This is similar to the evaluated expression method except you just able to compares multiple values with the only variable.

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

    ngclass使用三元算子

    三元运算符允许我们使用速记来指定两个不同的类,如果表达式为真,则为false。这是三元运算符的基本语法:

    ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">
    

    Evaluating首先,最后一个或特定的数字

    如果您使用的是ngRepeat directive and you want to apply classes to the firstlast或列表中的特定编号,您可以使用特殊属性ngRepeat.这些包括$first$last$even$odd和其他一些人。这是如何使用这些的例子。

    <!-- add a class to the first item -->
    <ul>
      <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
    </ul>
    
    <!-- add a class to the last item -->
    <ul>
      <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
    </ul>
    
    <!-- add a class to the even items and a different class to the odd items -->
    <ul>
      <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
    </ul>
    

    Vinit Solanki