Was ist der beste Weg, um bedingt eine Klasse anzuwenden?

Question

Sagen wir, Sie haben ein Array, das in einem ul mit einem li für jedes Element und einer Eigenschaft auf dem Controller namens selectedIndex gerendert wird. Wie könnte man am besten eine Klasse zu dem li mit dem Index selectedIndex in AngularJS hinzufügen?

Derzeit dupliziere ich (manuell) den li-Code und füge die Klasse zu einem der li Tags hinzu und benutze ng-show und ng-hide, um nur ein li pro Index anzuzeigen.

Answer 1

Ich hatte vor Kurzem ein ähnliches Problem und beschloss, einfach einen bedingten Filter zu erstellen:

  angular.module('myFilters', []).
    /**
     * "if" filter
     * Einfacher Filter nützlich für bedingte Anwendung von CSS-Klassen und Entkopplung
     * Ansicht vom Controller
     */
    filter('if', function() {
      return function(input, value) {
        if (typeof(input) === 'string') {
          input = [input, ''];
        }
        return value? input[0] : input[1];
      };
    });

Er nimmt ein einzelnes Argument, das entweder ein 2-Element-Array oder ein String ist, der in ein Array umgewandelt wird, dem als zweites Element ein Leerzeichen angehängt wird:

  ...

Answer 2

Wenn Sie über die binäre Auswertung hinausgehen und Ihren CSS-Code aus Ihrem Controller heraushalten möchten, können Sie einen einfachen Filter implementieren, der die Eingabe gegen ein Kartenobjekt auswertet:

angular.module('myApp.filters, [])
  .filter('switch', function () { 
      return function (input, map) {
          return map[input] || '';
      }; 
  });

Dies ermöglicht es Ihnen, Ihr Markup wie folgt zu schreiben:

    ...

Answer 3

Der Weg, den ich kürzlich gemacht habe, war folgender:

Der Wert isShowing ist ein Wert, der sich in meinem Controller befindet und mit einem Klick auf eine Schaltfläche umgeschaltet wird, und die Teile zwischen den einzelnen Klammern sind Klassen, die ich in meiner CSS-Datei erstellt habe.

EDIT: Ich möchte auch hinzufügen, dass codeschool.com einen kostenlosen Kurs anbietet, der von Google gesponsert wird und sich mit AngularJS befasst. Es werden alle diese Dinge und mehr behandelt. Es ist nicht notwendig, etwas zu bezahlen, melden Sie sich einfach an und legen Sie los! Viel Glück an alle!

Answer 4

Der Ternary Operator wurde gerade zum Angular-Parser in 1.1.5 hinzugefügt.

Also ist der einfachste Weg dies jetzt zu tun :

ng:class="($index==selectedIndex)? 'selected' : ''"

Answer 5

Wir können eine Funktion erstellen, um die Rückgabeklasse mit Bedingung zu verwalten

    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['Es ist Rot', 'Es ist Gelb', 'Es ist Blau', 'Es ist Grün', 'Es ist Grau'];
                $scope.getClass = function (strValue) {
                    switch(strValue) {
                        case "Es ist Rot":return "Red";break;
                        case "Es ist Gelb":return "Yellow";break;
                        case "Es ist Blau":return "Blue";break;
                        case "Es ist Grün":return "Green";break;
                        case "Es ist Grau":return "Gray";break;
                    }
                }
        }]);

Und dann

AngularJS ng-class if Beispiel

        {{icolor}}

Anderer Weg, um es zu tun: ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"

        {{icolor}}

Sie können die vollständige Code-Seite unter ng-class if Beispiel nachschlagen