Koşullu olması için ng-class
gibi bir ifade oluşturmanın herhangi bir yolu var mı?
Örneğin, aşağıdakileri denedim:
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>
Bu kodla ilgili sorun, obj.value1
ne olursa olsun, sınıf testinin her zaman öğeye uygulanmasıdır. Bunu yapmak:
<span ng-class="{test: obj.value2}">test</span>
obj.value2` doğru bir değere eşit olmadığı sürece, sınıf uygulanmaz. Şimdi bunu yaparak ilk örnekteki sorunun etrafından dolaşabilirim:
<span ng-class="{test: checkValue1()}">test</span>
Burada checkValue1
fonksiyonu aşağıdaki gibi görünür:
$scope.checkValue1 = function() {
return $scope.obj.value === 'somevalue';
}
Sadece ng-sınıfı
nın bu şekilde mi çalışması gerektiğini merak ediyorum. Ben de buna benzer bir şey yapmak istediğim özel bir yönerge oluşturuyorum. Ancak, bir ifadeyi izlemenin bir yolunu bulamıyorum (ve belki de bu imkansızdır ve bu şekilde çalışmasının nedeni budur).
İşte ne demek istediğimi gösteren bir plnkr.
İlk denemeniz neredeyse doğruydu, tırnak işaretleri olmadan çalışması gerekir.
{test: obj.value1 == 'someothervalue'}
İşte bir plnkr.
ngClass yönergesi, Javascript ifadelerine biraz benzeyen ancak bazı farklılıkları olan, doğru veya yanlış olarak değerlendirilen herhangi bir ifade ile çalışacaktır, burada okuyabilirsiniz. Eğer koşullu ifadeniz çok karmaşıksa, üçüncü denemenizde yaptığınız gibi doğru ya da yanlış döndüren bir fonksiyon kullanabilirsiniz.
Sadece tamamlamak için: Mantıksal operatörleri aşağıdaki gibi mantıksal ifadeler oluşturmak için de kullanabilirsiniz
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
ng-repeat içinde ng-class kullanma
<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>
task.status içindeki her durum için satır için farklı bir sınıf kullanılır.
Açısal sözdizimi, bir if değiştiricisinin eşdeğerini gerçekleştirmek için : operatörünü kullanmaktır
<div ng-class="{ 'clearfix' : (row % 2) == 0 }">
Çift satırlara clearfix sınıfı ekleyin. Bununla birlikte, ifade normal if koşulunda sahip olabileceğimiz herhangi bir şey olabilir ve doğru veya yanlış olarak değerlendirilmelidir.