AngularJS
dyrektywa klasy ng

Trzy typy wyrażeń klasy ng

Angular obsługuje trzy typy wyrażeń w dyrektywie ng-class .

1. Ciąg

<span ng-class="MyClass">Sample Text</span>

Określenie wyrażenia, którego wynikiem jest łańcuch, nakazuje Angularowi potraktowanie go jako zmiennej $ scope. Angular sprawdzi zakres $ i wyszuka zmienną o nazwie „MyClass”. Jakikolwiek tekst zawarty w „MyClass” stanie się faktyczną nazwą klasy, która zostanie zastosowana do tego <span> . Możesz określić wiele klas, oddzielając każdą klasę spacją.

W kontrolerze możesz mieć następującą definicję:

$scope.MyClass = "bold-red deleted error";

Angular oceni wyrażenie MyClass i znajdzie definicję $ scope. Zastosuje trzy klasy „pogrubiony czerwony”, „usunięty” i „błąd” do elementu <span> .

Określenie klas w ten sposób pozwala łatwo zmienić definicje klas w kontrolerze. Na przykład może być konieczna zmiana klasy w oparciu o inne interakcje użytkownika lub nowe dane ładowane z serwera. Ponadto, jeśli masz wiele wyrażeń do oceny, możesz to zrobić w funkcji, która definiuje ostateczną listę klas w zmiennej $scope . Może to być łatwiejsze niż próba wyciśnięcia wielu ocen do atrybutu ng-class w szablonie HTML.

2. Obiekt

Jest to najczęściej stosowany sposób definiowania klas za pomocą ng-class ponieważ pozwala łatwo określić oceny, które określają, której klasy należy użyć.

Określ obiekt zawierający pary klucz-wartość. Klucz to nazwa klasy, która zostanie zastosowana, jeśli wartość (warunkowa) zostanie oceniona jako prawdziwa.

<style>
    .red { color: red; font-weight: bold; }
    .blue { color: blue; }
    .green { color: green; }
    .highlighted { background-color: yellow; color: black; }
</style>

<span ng-class="{ red: ShowRed, blue: ShowBlue, green: ShowGreen, highlighted: IsHighlighted }">Sample Text</span>

<div>Red: <input type="checkbox" ng-model="ShowRed"></div>
<div>Green: <input type="checkbox" ng-model="ShowGreen"></div>
<div>Blue: <input type="checkbox" ng-model="ShowBlue"></div>
<div>Highlight: <input type="checkbox" ng-model="IsHighlighted"></div>

3. Tablica

Wyrażenie, którego wynikiem jest tablica, umożliwia użycie kombinacji ciągów (patrz nr 1 powyżej) i obiektów warunkowych (nr 2 powyżej).

<style>
    .bold { font-weight: bold; }
    .strike { text-decoration: line-through; }
    .orange { color: orange; }
</style>

<p ng-class="[ UserStyle, {orange: warning} ]">Array of Both Expression Types</p>
<input ng-model="UserStyle" placeholder="Type 'bold' and/or 'strike'"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

Spowoduje to utworzenie pola wprowadzania tekstu powiązanego ze zmienną zasięgu UserStyle która pozwala użytkownikowi wpisać dowolne nazwy klas. Będą one dynamicznie stosowane do elementu <p> miarę typów użytkowników. Ponadto użytkownik może kliknąć pole wyboru powiązane z danymi w zmiennej zasięgu warning . Będzie to również dynamicznie stosowane do elementu <p> .