Czy jest jakiś sposób na wyrażenie czegoś w rodzaju ng-classwarunku?

Na przykład próbowałem następujące:

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

Problem z tym kodem polega na tym, że bez względu na wszystko obj.value1test klasy jest zawsze stosowany do elementu. Robiąc to:

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

Dopóki obj.value2nie jest równa prawdziwej wartości, klasa nie jest stosowana. Teraz mogę obejść ten problem w pierwszym przykładzie, wykonując następujące czynności:

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

Gdzie checkValue1funkcja wygląda następująco:

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

Zastanawiam się tylko, czy tak ma ng-classto działać. Buduję też niestandardową dyrektywę, w której chciałbym zrobić coś podobnego do tego. Nie mogę jednak znaleźć sposobu na obejrzenie wyrażenia (a może to niemożliwe i powód, dla którego tak działa).

Oto plnkr, aby pokazać, co mam na myśli.

Twoja pierwsza próba była prawie słuszna, powinna działać bez cytatów.

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

Oto plnkr .

Dyrektywa ngClass będzie działać z każdym wyrażeniem, które ocenia prawdę lub falsey, trochę podobnie do wyrażeń JavaScript, ale z pewnymi różnicami, o których możesz przeczytać tutaj . Jeśli twoje warunki warunkowe są zbyt złożone, możesz użyć funkcji, która zwraca wartość true lub falsey, tak jak w przypadku trzeciej próby.

Tylko w celu uzupełnienia: możesz także używać operatorów logicznych do tworzenia wyrażeń logicznych, takich jak

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

Używanie klasy ng wewnątrz 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>

Dla każdego statusu w pliku task.status dla wiersza używana jest inna klasa.

Angular JS zapewnia tę funkcjonalność w dyrektywie klasy ng . W którym możesz umieścić warunek, a także przypisać klasę warunkową. Możesz to osiągnąć na dwa różne sposoby.

Typ 1

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

W tym kodzie klasa będzie mieć zastosowanie według wartości stanu wartości

jeśli wartością stanu jest 0, zastosuj klasę pierwszą

jeśli wartością stanu jest 1, zastosuj klasę drugą

jeśli wartością stanu jest 2, zastosuj klasę trzecią

Wpisz 2

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

W której klasie będą stosowane według wartości statusu

jeśli wartością statusu jest 1 lub prawda, to doda klasę test_yes

jeśli wartością stanu jest 0 lub fałsz, to doda klasę test_no

Widzę świetne przykłady powyżej, ale wszystkie zaczynają się od nawiasów klamrowych (mapa Json). Inną opcją jest zwrócenie wyniku na podstawie obliczeń. Wynikiem może być również lista nazw klas css (nie tylko mapa). Przykład:

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

lub

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

Objaśnienie: Jeśli status jest aktywny, klasa enabledzostanie użyta. W przeciwnym razie disabledzostanie użyta klasa .

Lista []służy do używania wielu klas (nie tylko jednej).

Istnieje prosta metoda, której można użyć z atrybutem klasy HTML i skrótem if / else. Nie trzeba go tak komplikować. Wystarczy użyć następującej metody.

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

Happy Coding, Nimantha Perera

Pokażę ci dwie metody, dzięki którym możesz dynamicznie zastosować klasę ng

Krok 1

Za pomocą operatora trójskładnikowego

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

Wynik

Jeśli twój warunek jest spełniony, klasa 1 zostanie zastosowana do twojego elementu, w przeciwnym razie zostanie zastosowana klasa 2.

Niekorzyść

Gdy spróbujesz zmienić wartość warunkową w czasie wykonywania, klasa jakoś się nie zmieni. Proponuję więc przejść do kroku 2, jeśli masz wymagania takie jak dynamiczna zmiana klasy.

Krok 2

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

Wynik

jeśli twój warunek pasuje do wartości 1, wówczas klasa 1 zostanie zastosowana do twojego elementu, jeśli pasuje do wartości 2, wówczas klasa 2 zostanie zastosowana i tak dalej. Dynamiczna zmiana klasy będzie z tym dobrze współpracować.

Mam nadzieję, że to ci pomoże.

Składnia kątowa polega na użyciu operatora : do wykonania odpowiednika modyfikatora if

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

Dodaj klasę clearfix do parzystych wierszy. Niemniej jednak wyrażenie może być wszystkim, co możemy mieć w normie, jeśli warunek, i powinno być ocenione na prawdę lub fałsz.

Używanie funkcji z klasą ng jest dobrą opcją, gdy ktoś musi uruchomić złożoną logikę, aby wybrać odpowiednią klasę CSS.

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

Użyj tego

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

na przykład jeśli warunek to [2 == 2], stany to {prawda: „...”, fałsz: „...”}

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

W przypadku Angular 2 użyj tego

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

ng-classto dyrektywa podstawowych AngularJs. W którym możesz użyć „Składni ciągu”, „Składni macierzy”, „Wyrażenia wyrażonego”, „Operatora trójskładnikowego” i wielu innych opcji opisanych poniżej:

ngClass przy użyciu składni łańcuchowej

Jest to najprostszy sposób użycia ngClass. Możesz po prostu dodać zmienną Angular do ng-class i to jest klasa, która zostanie użyta dla tego elementu.

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

Przykład demonstracji ngClass przy użyciu składni łańcuchowej

ngClass przy użyciu składni macierzy

Jest to podobne do metody składni łańcuchowej, z tym że możesz zastosować wiele klas.

<!-- 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 przy użyciu wyrażenia ewaluowanego

Bardziej zaawansowaną metodą używania ngClass (i tej, której prawdopodobnie będziesz używać najczęściej) jest ocena wyrażenia. Działa to w ten sposób, że jeśli zmienna lub wyrażenie oblicza wartość true, możesz zastosować określoną klasę. Jeśli nie, klasa nie zostanie zastosowana.

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

Przykład ngClass z wykorzystaniem wyrażenia ewaluowanego

ngClass Korzystanie z wartości

Jest to podobne do oceny wyrażonej metody, z tą różnicą, że możesz porównać wiele wartości z jedyną zmienną.

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

ngClass Korzystanie z operatora trójskładnikowego

Operator trójskładnikowy pozwala nam użyć skróconej nazwy do określenia dwóch różnych klas, jednej, jeśli wyrażenie jest prawdziwe, a drugiej dla fałszu. Oto podstawowa składnia dla operatora trójskładnikowego:

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

Ocena pierwszej, ostatniej lub określonej liczby

Jeśli używasz ngRepeatdyrektywę i chcesz zastosować do klas first, lastalbo liczby określonej w wykazie, można użyć specjalnych właściwości ngRepeat. Należą do nich $first, $last, $even, $odd, i kilka innych. Oto przykład, jak z nich korzystać.

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