Menambahkan beberapa kelas menggunakan ng-class

Bisakah kita memiliki beberapa ekspresi untuk menambahkan beberapa kelas ng?

untuk mis.

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

Jika ya, adakah yang bisa memberikan contoh untuk melakukannya.

.

Untuk menerapkan kelas yang berbeda ketika ekspresi berbeda mengevaluasi untuk true:

<div ng-class="{class1 : expression1, class2 : expression2}">
    Hello World!
</div>

Untuk menerapkan beberapa kelas saat ekspresi benar:

<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
    Hello World!
</div>

atau cukup sederhana:

<div ng-class="{'class1 class2' : expression1}">
    Hello World!
</div>

Perhatikan tanda kutip tunggal seputar kelas css.

Untuk notasi operator ternary:

<div ng-class="expression1? 'class1 class2' : 'class3 class4'">

Ya, Anda dapat memiliki beberapa ekspresi untuk menambahkan beberapa kelas dalam kelas ng.

Sebagai contoh:

<div ng-class="{class1:Result.length==2,class2:Result.length==3}"> Dummy Data </div>

Alternatif yang sangat kuat untuk jawaban lain di sini:

ng-class="[  { key: resulting-class-expression }[ key-matching-expression ], ..  ]"

Beberapa contoh:

1. Cukup tambahkan 'class1 class2 class3' ke div:

<div ng-class="[{true: 'class1'}[true], {true: 'class2 class3'}[true]]"></div>

2. Menambahkan kelas 'odd' atau 'even' ke div, tergantung pada $ index:

<div ng-class="[{0:'even', 1:'odd'}[ $index % 2]]"></div>

3. Secara dinamis membuat kelas untuk setiap div berdasarkan $ index

<div ng-class="[{true:'index'+$index}[true]]"></div>

Jika $index=5ini menghasilkan:

<div class="index5"></div>

Berikut contoh kode yang dapat Anda jalankan:

var app = angular.module('app', []); 
app.controller('MyCtrl', function($scope){
  $scope.items = 'abcdefg'.split('');
}); 

.odd  { background-color: #eee; }
.even { background-color: #fff; }
.index5 {background-color: #0095ff; color: white; font-weight: bold; }
* { font-family: "Courier New", Courier, monospace; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="item in items"
    ng-class="[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]">
    index {{$index}} = "{{item}}" ng-class="{{[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]].join(' ')}}"
  </div>
</div>

Menggunakan $scopemetode pada pengontrol, Anda bisa menghitung kelas apa yang akan ditampilkan dalam tampilan. Ini sangat berguna jika Anda memiliki logika kompleks untuk menghitung nama kelas dan itu akan mengurangi jumlah logika dalam tampilan Anda dengan memindahkannya ke controller:

app.controller('myController', function($scope) {

    $scope.className = function() {

        var className = 'initClass';

        if (condition1())
            className += ' class1';

        if (condition2())
            className += ' class2';

        return className;
    };
});

dan dalam tampilan, cukup:

<div ng-class="className()"></div>

Contoh Anda berfungsi untuk kelas terkondisi (nama kelas akan menunjukkan jika expressionDataXitu benar):

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

Anda juga dapat menambahkan beberapa kelas, yang disediakan oleh pengguna elemen:

<div ng-class="[class1, class2]"></div>

Pemakaian:

<div class="foo bar" class1="foo" class2="bar"></div>

Berikut adalah contoh yang membandingkan beberapa status angular-ui-router menggunakan OR || operator:

<li ng-class="
    {
        warning:
            $state.includes('out.pay.code.wrong')
            || $state.includes('out.pay.failed')
        ,
        active:
            $state.includes('out.pay')
    }
">

Ini akan memberi li kelas peringatan dan / atau aktif, tergantung pada apakah kondisi terpenuhi.

Di bawah ini aktif dan activemenu adalah kelas dan itemCount dan ShowCart adalah nilai ekspresi / boolean.

ng-class="{'active' : itemCount, 'activemenu' : showCart}"

Dengan berbagai kondisi

<div ng-class="{'class1' : con1 || can2, 'class2' : con3 && con4}">
Hello World!
</div>

Menemukan cara lain berkat Scotch.io

<div ng-repeat="step in steps" class="step-container step" ng-class="[step.status, step.type]" ng-click="onClick(step.type)">

Ini referensi saya. PATH

Cara lain kita dapat membuat fungsi untuk mengontrol "menggunakan beberapa kelas"

CSS

 <style>
    .Red {
        color: Red;
    }
    .Yellow {
        color: Yellow;
    }
      .Blue {
        color: Blue;
    }
      .Green {
        color: Green;
    }
    .Gray {
        color: Gray;
    }
    .b {
         font-weight: bold;
    }
</style>

Naskah

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    if (strValue == ("It is Red"))
                        return "Red";
                    else if (strValue == ("It is Yellow"))
                        return "Yellow";
                    else if (strValue == ("It is Blue"))
                        return "Blue";
                    else if (strValue == ("It is Green"))
                        return "Green";
                    else if (strValue == ("It is Gray"))
                        return "Gray";
                }
        }]);
</script>

Menggunakannya

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>

Anda dapat merujuk ke halaman kode lengkap di kelas ng misalnya