Apakah ada cara untuk membuat sebuah ungkapan untuk sesuatu seperti ng-kelas
untuk menjadi bersyarat?
Sebagai contoh, saya telah mencoba yang berikut ini:
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>
Masalah dengan kode ini adalah bahwa tidak peduli apa yang obj.value1
adalah, kelas tes selalu diterapkan ke elemen. Lakukan ini:
<span ng-class="{test: obj.value2}">test</span>
Selama obj.value2
tidak sama truthy nilai, kelas tidak diterapkan. Sekarang saya bisa bekerja di sekitar masalah dalam contoh pertama dengan melakukan hal ini:
<span ng-class="{test: checkValue1()}">test</span>
Di mana checkValue1
fungsi terlihat seperti ini:
$scope.checkValue1 = function() {
return $scope.obj.value === 'somevalue';
}
Saya hanya bertanya-tanya jika ini adalah bagaimana ng-kelas
seharusnya bekerja. Saya juga membangun kustom direktif di mana saya ingin melakukan sesuatu yang mirip dengan ini. Namun, saya dapat't menemukan cara untuk menonton sebuah ekspresi (dan mungkin itu adalah mustahil dan alasan mengapa ia bekerja seperti ini).
Berikut ini adalah plnkr untuk menunjukkan apa yang saya maksud.
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.
<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
<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
Dengan menggunakan operator ternary
<div ng-class="condition?'class1':'class2'"></div>
Jika kondisi benar maka class1 akan diterapkan ke elemen yang lain class2 yang akan diterapkan.
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.
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
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.
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>
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:
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.
<!-- 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!
Demo Contoh ngClass Menggunakan String Sintaks
Hal ini mirip dengan string sintaks metode 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!
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 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 Dievaluasi Ekspresi
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>
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'">
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.
<!-- 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>