AngularJS ngClass bersyarat


499

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.



43
Kelas dengan tanda hubung perlu dikutip:ng-class="'label-success': obj.value1 == 'Ready', 'label-warning': obj.value1 == 'On hold'}"
Brent Washburne

2
Kita dapat menggunakan kondisi yang lebih dengan ng-kelas, lihat di blog ini goo.gl/qfEQZw
Virender


"Kelas dengan tanda hubung membutuhkan bulu mata '' '' ''" "
richard

Jawaban:


596

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

2
Terima kasih, untuk alasan apa pun, saya pikir karena ini adalah ekspresi sebagai nilai objek, semuanya harus dalam tanda kutip.
ryanzec

8
bungkus nama kelas dengan 'sebaliknya jika Anda ingin menambahkan lebih banyak kelas atau jika kelas Anda memiliki tanda hubung atau garis bawah tidak akan berfungsi. ng-class="{'test test-2: obj.value1 === 'value'}"
Andrea Turri

6
@ Andrea, Anda lupa kutipan penutup: ng-class="{'test test-2': obj.value1 === 'value'}"
ErikE

Untuk Angular2 (yang saya sedang berusaha mencari) penggunaan atribut (s) seperti: [class.test]="obj.value1 == 'someotervalue'".
kub1x

Untuk pembaca, Anda juga dapat memiliki kurung. ng-class="{danger:!enabled || (type === 'WHEEL' && !isOnline) }
daCoda

227

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.


Contoh sempurna dengan banyak kelas, Terima kasih!
Sreekanth Karini

112

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


1
apa status di sini?
CommonSenseCode

Status adalah nilai yang ingin Anda periksa atau validasi sesuai dengan kelas yang akan diterapkan.
Kaushal Khamar

4
Menyukai cara ini karena lebih fleksibel dan tidak gila ketika berhadapan dengan banyak nilai
Eduardo La Hoz Miranda

Bagaimana kalau menggunakannya untuk beberapa kelas. Seperti, <div ng-class = "{0: 'one', 1: 'two', 2: 'three'} [status], {0: 'one', 1: 'two'} [status1]"> </div>
parth.hirpara

1
dapatkah kita menggunakan ini dalam kasus seperti: <div ng-class="{'Image' || 'image': 'image-icon', 'Video' || 'video' || 'aVideo' || 'bVideo' : 'video-icon'}[resource.type]"></div>
Chandra Kant Paliwal

80

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


1
Indah, semua contoh luar biasa, tapi aku paling suka milikmu!
stormec56

48

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


2
Orang ini mengerti. Terima kasih bud
deepakgates

36

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.


36

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.


1
Bagus! Juga, di dalam ng-repeat Anda bisa menggunakan $ even untuk mengatur kelas. Misalnya ng-class = "$ even? 'Even': 'odd'". Bools bagus lainnya di dalam ng-repeat adalah $ pertama, $ terakhir, $ genap, $ ganjil ...
Max

15

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

2
Saya pikir ini mengacaukan keprihatinan. Kontroler harus lebih abstrak dan tidak peduli tentang kelas css, tetapi nyatakan. Berdasarkan status, kelas css harus diterapkan dalam templat. Dengan cara ini controller tidak tergantung pada template dan lebih mudah digunakan kembali.
Hubert Grzeskowiak

9

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>

tetapi jika saya memiliki 3 kondisi atau lebih, ini tidak akan berhasil? karena ini hanya akan mengembalikan kondisi benar dan salah
Ali Al Amine

kondisi berarti benar atau salah. Anda berarti sesuatu dengan lebih dari 2 nilai ?? @AlyAlAmeen
Saeed

7

Untuk Angular 2, gunakan ini

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

Untuk memperluas ini, untuk Angular 2 Anda menerapkan kelas dan juga pengubah kelas dalam kondisi if / else menggunakan array seperti:[ngClass]="['base-class', thread.isActive ? 'base-class--active' : '']"
Matt Rabe

5

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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.