ng-classŞartlı olmak gibi bir şey için ifade yapmanın bir yolu var mı ?

Örneğin, aşağıdakileri denedim:

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

Bu kodla ilgili sorun, ne olursa olsun obj.value1, sınıf testinin her zaman öğeye uygulanmasıdır. Bunu yapmak:

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

obj.value2Doğru bir değere eşit olmadığı sürece , sınıf uygulanmaz. Şimdi ilk örnekte bunu yaparak sorunu çözebilirim:

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

Nerede checkValue1böyle fonksiyon görünüyor:

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

Sadece bunun nasıl ng-classçalışması gerektiğini merak ediyorum . Ayrıca buna benzer bir şey yapmak istediğim özel bir yönerge hazırlıyorum. Ancak, bir ifadeyi izlemenin bir yolunu bulamıyorum (ve belki de bu imkansızdır ve bunun böyle çalışmasının nedeni).

İşte ne demek istediğimi göstermek için bir plnkr .

İlk denemeniz neredeyse haklıydı, tırnak işaretleri olmadan çalışmalı.

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

İşte bir plnkr .

NgClass yönergesi, Javascript ifadelerine biraz benzeyen, ancak bazı farklılıklar ile, burada okuyabilirsiniz, doğruluk veya falsey değerlendiren herhangi bir ifade ile çalışacaktır . Koşullu çok karmaşıksa, üçüncü denemenizde yaptığınız gibi, doğruluk veya falsey döndüren bir işlevi kullanabilirsiniz.

Sadece tamamlayıcı olmak için: Mantıksal işleçleri aşağıdaki gibi mantıksal ifadeler oluşturmak için de kullanabilirsiniz

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

Ng-class içinde ng-repeat 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 dosyasındaki her durum için satır için farklı bir sınıf kullanılır.

Açısal JS bu işlevselliği ng sınıfı Direktifte sağlar . Hangi koşul koyabilirsiniz ve ayrıca koşullu sınıf atayabilirsiniz. Bunu iki farklı şekilde başarabilirsiniz.

Tür 1

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

Bu kod sınıfında durum değerinin değerine göre uygulanacaktır

eğer durum değeridir 0 ardından sınıf uygulamak birini

eğer durum değeridir 1 sonra sınıfı uygulamak iki

eğer durum değeridir 2 sonra sınıfı uygulamak üç

Tip 2

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

Hangi sınıfta statü değerine göre uygulanacaktır

eğer durum değeridir 1 veya gerçek o zaman sınıf katacak test_yes

eğer durum değeridir 0 veya false o zaman sınıf katacak test_no

Yukarıda harika örnekler görüyorum ama hepsi kıvrık parantez (json haritası) ile başlıyor. Başka bir seçenek de hesaplamaya dayalı bir sonuç döndürmektir. Sonuç aynı zamanda css sınıf isimlerinin bir listesi olabilir (sadece harita değil). Misal:

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

veya

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

Açıklama: Durum etkinse, sınıf enabledkullanılır. Aksi takdirde sınıf disabledkullanılacaktır.

Liste []birden fazla sınıfı (yalnızca bir tane değil) kullanmak için kullanılır.

Eğer html sınıf özniteliği ve eğer / else ile kestirme ile kullanabileceğiniz basit bir yöntem vardır. Bu kadar karmaşık hale getirmeye gerek yok. Sadece aşağıdaki yöntemi kullanın.

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

Mutlu Kodlama, Nimantha Perera

Ng-class'ı dinamik olarak uygulayabileceğiniz iki yöntem göstereceğim.

Aşama 1

Üçlü operatör kullanarak

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

Çıktı

Koşulunuz doğruysa, class1 öğenize uygulanır, class2 uygulanır.

dezavantaj

Çalışma zamanında koşullu değeri değiştirmeye çalıştığınızda sınıf bir şekilde değişmez. Dinamik sınıf değişikliği gibi bir gereksiniminiz varsa 2. adıma geçmenizi öneririm.

Adım 2

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

Çıktı

koşulunuz değer1 ile eşleşiyorsa, öğenize class1 uygulanır, değer2 ile eşleşirse sınıf2 uygulanır. Ve dinamik sınıf değişimi onunla iyi çalışacaktır.

Umarım bu sana yardımcı olur.

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, eğer koşul halinde normal olarak sahip olabileceğimiz herhangi bir şey olabilir ve doğru ya da yanlış olarak değerlendirmelidir.

Birisi uygun CSS sınıfına karar vermek için karmaşık mantık çalıştırması gerektiğinde ng sınıfı ile işlev kullanmak iyi bir seçenektir.

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

bunu kullan

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

örneğin koşul [2 == 2] ise, durumlar {true: '...', false: '...'} şeklindedir.

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

Açısal 2 için bunu kullanın

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

ng-classana AngularJ'lerin bir Direktifidir. İçinde "Dize Sözdizimi", "Dizi Sözdizimi", "Değerlendirilen İfade", "Üçlü İşleç" ve aşağıda açıklanan diğer birçok seçeneği kullanabilirsiniz:

dize Sözdizimini Kullanarak ngClass

NgClass'ı kullanmanın en basit yolu budur. Ng sınıfına bir Açısal değişken ekleyebilirsiniz ve bu öğe için kullanılacak sınıf budur.

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

Dize Sözdizimini Kullanarak ngClass Demo Örneği

C Dizi Sözdizimini Kullanarak Sınıf

Bu, birden çok sınıf uygulayabilmeniz dışında dize sözdizimi yöntemine benzer.

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

Değerlendirilen İfadeyi Kullanarak ngClass

NgClass (ve muhtemelen en çok kullanacağınız) kullanmanın daha gelişmiş bir yöntemi bir ifadeyi değerlendirmektir. Bunun çalışma şekli, bir değişken veya ifade değerlendirilirse true, belirli bir sınıfı uygulayabilmenizdir. Değilse, sınıf uygulanmaz.

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

Değerlendirilen İfadeyi Kullanan ngClass Örneği

ngClass Kullanım Değeri

Bu, yalnızca birden çok değeri tek değişkenle karşılaştırabilmeniz dışında, değerlendirilen ifade yöntemine benzer.

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

Üçlü Operatörü Kullanarak ngClass

Üçlü işleç, bir ifade doğruysa diğeri yanlış için olmak üzere iki farklı sınıf belirtmek için steno kullanmamıza olanak tanır. Üçlü işleç için temel sözdizimi:

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

İlk, Son veya Belirli Sayıların Değerlendirilmesi

Eğer kullanıyorsanız ngRepeatyönergesi ve size sınıfları uygulamak istediğiniz first, lastlistede veya belirli bir sayıda, sen özel özelliklerini kullanabilirsiniz ngRepeat. Bunlar arasında $first, $last, $even, $odd, ve birkaç başka. İşte bunların nasıl kullanılacağına dair bir örnek.

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