Apakah ada cara untuk membuat ekspresi sesuatu seperti ng-classmenjadi bersyarat?

Misalnya, saya sudah mencoba yang berikut ini:

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

Masalah dengan kode ini adalah bahwa apa pun obj.value1itu, uji kelas selalu diterapkan pada elemen. Melakukan ini:

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

Selama obj.value2tidak sama dengan nilai kebenaran, kelas dalam tidak diterapkan. Sekarang saya dapat mengatasi masalah dalam contoh pertama dengan melakukan ini:

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

Di mana checkValue1fungsinya terlihat seperti ini:

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

Saya hanya ingin tahu apakah ini ng-classseharusnya bekerja. Saya juga membangun arahan khusus di mana saya ingin melakukan sesuatu yang mirip dengan ini. Namun, saya tidak dapat menemukan cara untuk menonton ekspresi (dan mungkin itu tidak mungkin dan alasan mengapa ia bekerja seperti ini).

Berikut ini adalah plnkr untuk menunjukkan apa yang saya maksud.

Upaya pertama Anda hampir benar, seharusnya berhasil tanpa tanda kutip.

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

Berikut ini adalah sebuah plnkr .

Arahan ngClass akan bekerja dengan ekspresi apa pun yang mengevaluasi truthy atau falsey, sedikit mirip dengan ekspresi Javascript tetapi dengan beberapa perbedaan, Anda dapat membaca di sini . Jika kondisi Anda terlalu kompleks, maka Anda dapat menggunakan fungsi yang mengembalikan kebenaran atau kesalahan, seperti yang Anda lakukan dalam upaya ketiga Anda.

Sebagai pelengkap: Anda juga dapat menggunakan operator logis untuk membentuk ekspresi logis seperti

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

Menggunakan ng-class di 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 dalam task.status, kelas yang berbeda digunakan untuk baris.

Angular JS menyediakan fungsi ini dalam Instruksi kelas . Di mana Anda dapat menempatkan kondisi dan juga menetapkan kelas bersyarat. Anda dapat mencapai ini dengan dua cara berbeda.

Tipe 1

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

Dalam kode ini kelas akan berlaku sesuai dengan nilai statusnya nilai

jika nilai status adalah 0 maka terapkan kelas satu

jika nilai status adalah 1 maka terapkan kelas dua

jika nilai statusnya 2 maka terapkan kelas tiga

Tipe 2

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

Di kelas mana akan diterapkan berdasarkan nilai status

jika nilai status adalah 1 atau benar maka itu akan menambah kelas test_yes

jika nilai status 0 atau false maka akan menambah kelas test_no

Saya melihat contoh yang bagus di atas tetapi mereka semua mulai dengan kurung keriting (json map). Pilihan lain adalah mengembalikan hasil berdasarkan perhitungan. Hasilnya juga bisa berupa daftar nama kelas css (bukan hanya peta). Contoh:

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

atau

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

Penjelasan: Jika statusnya aktif, kelas enabledakan digunakan. Kalau tidak, kelas disabledakan digunakan.

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

Ada metode sederhana yang dapat Anda gunakan dengan atribut kelas html dan singkatan jika / yang lain. Tidak perlu membuatnya begitu rumit. Cukup gunakan metode berikut.

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

Selamat Coding, Nimantha Perera

Saya akan menunjukkan kepada Anda dua metode yang dengannya Anda dapat menerapkan kelas-ng secara dinamis

Langkah 1

Dengan menggunakan operator ternary

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

Keluaran

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

Kerugian

Ketika Anda akan mencoba untuk mengubah nilai kondisional pada saat run time kelas tidak akan berubah. Jadi saya akan menyarankan Anda untuk pergi ke step2 jika Anda memiliki persyaratan seperti perubahan kelas dinamis.

Langkah 2

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

Keluaran

jika kondisi Anda cocok dengan value1 maka class1 akan diterapkan ke elemen Anda, jika cocok dengan value2 maka class2 akan diterapkan dan seterusnya. Dan perubahan kelas yang dinamis akan bekerja dengan baik dengannya.

Semoga ini bisa membantu Anda.

Sintaks sudut adalah dengan menggunakan operator : untuk melakukan yang setara dengan pengubah if

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

Tambahkan kelas clearfix ke baris genap. Meskipun demikian, ekspresi dapat berupa apa pun yang dapat kita miliki dalam kondisi normal jika dan harus dievaluasi menjadi benar atau salah.

Menggunakan fungsi dengan ng-class adalah pilihan yang baik ketika seseorang harus menjalankan logika kompleks untuk memutuskan kelas CSS yang sesuai.

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 kondisinya adalah [2 == 2], statusnya adalah {true: '...', false: '...'}

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

Untuk Angular 2, gunakan ini

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

ng-classadalah Arahan Inti Angular. Di mana Anda dapat menggunakan "Sintaks String", "Sintaks Array", "Ekspresi Evaluasi", "Operator Ternary" dan banyak lagi opsi yang dijelaskan di bawah ini:

ngClass Menggunakan Sintaks String

Ini adalah cara paling sederhana untuk menggunakan ngClass. Anda bisa menambahkan variabel Angular ke kelas-ng dan itu adalah kelas yang akan digunakan untuk elemen itu.

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

Contoh Demo dari ngClass Menggunakan String Syntax

ngClass Menggunakan Sintaks Array

Ini mirip dengan metode sintaksis string kecuali Anda dapat menerapkan beberapa kelas.

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

ngClass Menggunakan Ekspresi yang Dievaluasi

Metode yang lebih maju dalam menggunakan ngClass (dan yang mungkin paling sering Anda gunakan) adalah mengevaluasi ekspresi. Cara kerjanya adalah jika variabel atau ekspresi mengevaluasi true, Anda bisa menerapkan kelas tertentu. Jika tidak, maka kelas tidak akan diterapkan.

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

Contoh ngClass Menggunakan Ekspresi yang Dievaluasi

ngClass Menggunakan Nilai

Ini mirip dengan metode ekspresi yang dievaluasi kecuali Anda hanya bisa membandingkan beberapa nilai dengan satu-satunya variabel.

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

ngClass Menggunakan Operator Ternary

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

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

Mengevaluasi Nomor Pertama, Terakhir atau Spesifik

Jika Anda menggunakan ngRepeatdirektif dan Anda ingin menerapkan kelas ke first, lastatau nomor tertentu dalam daftar, Anda dapat menggunakan sifat khusus dari ngRepeat. Ini termasuk $first, $last, $even, $odd, dan beberapa orang lainnya. Berikut ini contoh cara menggunakannya.

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