Upaya pertama anda hampir benar, harus bekerja tanpa tanda kutip.

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

Berikut ini adalah plnkr.

Yang ngClass direktif akan bekerja dengan ekspresi yang mengevaluasi truthy atau falsey, sedikit mirip dengan Javascript ekspresi tetapi dengan beberapa perbedaan, anda dapat membaca tentang di sini. Jika anda bersyarat adalah terlalu kompleks, maka anda dapat menggunakan sebuah fungsi yang mengembalikan truthy atau falsey, seperti yang anda lakukan dalam upaya ketiga.

Hanya untuk melengkapi: Anda juga dapat menggunakan operator logika untuk membentuk ekspresi logis seperti

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

Menggunakan ng-kelas dalam ng-repeat

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

Untuk setiap status pada tugas.status kelas yang berbeda digunakan untuk baris.

Angular JS menyediakan fungsi ini di ng-kelas Direktif. Di mana anda dapat menempatkan kondisi dan juga menetapkan bersyarat kelas. Anda dapat mencapai hal ini dalam dua cara yang berbeda.

Tipe 1

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

Dalam kode ini kelas akan berlaku sesuai dengan nilai status nilai

jika status nilai 0 kemudian oleskan kelas one

jika status nilai 1 kemudian oleskan kelas dua

jika status nilai 2 kemudian oleskan kelas tiga

Tipe 2

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

Di kelas yang akan menerapkan dengan nilai status

jika status nilai 1 atau true maka akan menambah kelas test_yes

jika status nilai 0 atau false maka akan menambah kelas test_no

Saya melihat contoh-contoh di atas, tetapi mereka semua mulai dengan kurung kurawal (json peta). Pilihan lain adalah untuk kembali hasil berdasarkan perhitungan. Hasilnya juga dapat daftar nama kelas css (tidak hanya peta). Contoh:

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

atau

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

Penjelasan: Jika status aktif, kelas diaktifkan akan digunakan. Jika tidak, kelas cacat yang akan digunakan.

Daftar [] digunakan untuk menggunakan beberapa kelas (tidak hanya satu).

Ada metode sederhana yang dapat anda gunakan dengan atribut class html, dan singkatan if/else. Tidak perlu untuk membuat itu begitu kompleks. Hanya menggunakan metode berikut.

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

Happy Coding, Nimantha Perera

Sudut sintaks untuk menggunakan : operator untuk melakukan setara jika pengubah

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

Tambahkan clearfix kelas bahkan untuk baris. Meskipun demikian, ekspresi bisa menjadi apa pun yang dapat kita miliki dalam normal jika kondisi dan harus mengevaluasi ke true atau false.

Saya akan menunjukkan kepada anda dua metode dengan mana anda dapat secara dinamis menerapkan ng-kelas

Langkah-1

Dengan menggunakan operator ternary

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

Output

Jika kondisi benar maka class1 akan diterapkan ke elemen yang lain class2 yang akan diterapkan.

Kelemahan

Ketika anda akan mencoba untuk mengubah nilai bersyarat pada jangka waktu kelas entah bagaimana tidak akan berubah. Jadi saya akan menyarankan anda untuk pergi untuk step2 jika anda memiliki persyaratan seperti kelas dinamis berubah.

Langkah-2

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

Output

jika kondisi anda sesuai dengan value1 kemudian class1 akan diterapkan ke elemen anda, jika cocok dengan value2 kemudian class2 akan diterapkan, dan sebagainya. Dan dinamis kelas perubahan akan bekerja dengan baik dengan itu.

Berharap ini akan membantu anda.

Menggunakan fungsi dengan ng-hotel ini adalah pilihan yang baik ketika seseorang memiliki untuk menjalankan logika yang kompleks untuk memutuskan sesuai kelas 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 ";
  }     
}

gunakan ini

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

misalnya jika kondisi ini [2 == 2], serikat adalah {benar: '...', palsu: '...'}

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

Untuk Sudut 2, gunakan ini

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

ng-class adalah Direktif inti AngularJs. Di mana anda dapat menggunakan "String Sintaks", "Array Sintaks", "Mengevaluasi Ekspresi", " Operator Ternary" dan banyak pilihan yang dijelaskan di bawah ini:

ngClass Menggunakan String Sintaks

Ini adalah cara paling sederhana untuk menggunakan ngClass. Anda hanya dapat menambahkan Sudut variabel untuk ng-kelas itu adalah kelas yang akan digunakan untuk elemen tersebut.

<input type="text" ng-model="textType">


<div ng-class="textType">Look! I'm Words!

Demo Contoh ngClass Menggunakan String Sintaks

ngClass Menggunakan Array Sintaks

Hal ini mirip dengan string sintaks metode kecuali anda dapat menerapkan beberapa kelas.

<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">


<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

ngClass Menggunakan Ekspresi Dievaluasi

Sebuah metode yang lebih canggih menggunakan ngClass (dan salah satu yang anda mungkin akan menggunakan sebagian besar) adalah untuk mengevaluasi ekspresi. Cara ini bekerja adalah bahwa jika sebuah variabel atau ekspresi yang mengevaluasi ke benar, anda dapat menerapkan kelas tertentu. Jika tidak, maka kelas won't akan diterapkan.

<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?


<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

Contoh ngClass Menggunakan Dievaluasi Ekspresi

ngClass Menggunakan Nilai

Hal ini mirip dengan ekspresi dievaluasi metode kecuali anda hanya dapat membandingkan beberapa nilai dengan satu-satunya variabel.

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

ngClass Menggunakan Operator Ternary

Operator ternary memungkinkan kita untuk menggunakan singkatan untuk menentukan dua kelas yang berbeda, jika salah satu ekspresi benar dan satu salah. Berikut ini adalah sintaks dasar untuk operator ternary:

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

Evaluasi Pertama, Terakhir atau Nomor Tertentu

Jika anda menggunakan ngRepeat direktif dan anda ingin menerapkan kelas untuk pertama, lalu, atau nomor tertentu dalam daftar, anda dapat menggunakan sifat khusus dari ngRepeat. Ini termasuk $pertama, $lalu, $bahkan, $aneh, dan beberapa orang lainnya. Berikut ini's contoh bagaimana untuk menggunakan ini.

<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>


<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>


<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>