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


Angenommen, Sie haben ein Array, das in a gerendert wird ul mit einem li für jedes Element und eine Eigenschaft auf dem Controller aufgerufen selectedIndex. Was wäre der beste Weg, um eine Klasse hinzuzufügen li mit dem Index selectedIndex in AngularJS?

Ich vervielfältige derzeit (von Hand) die li Code und Hinzufügen der Klasse zu einem der li Tags und verwenden ng-show und ng-hide um nur einen zu zeigen li pro Index.


1132
2017-10-17 10:49


Ursprung


Antworten:


Wenn Sie CSS-Klassennamen nicht wie ich in den Controller einfügen möchten, ist dies ein alter Trick, den ich seit Tagen vor v1 verwende. Wir können einen Ausdruck schreiben, der direkt zu einem Klassennamen führt ausgewählt, keine benutzerdefinierten Anweisungen sind erforderlich:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

Bitte beachten Sie die alte Syntax mit Doppelpunkt. 

Es gibt auch einen neuen besseren Weg, Klassen unter bestimmten Bedingungen anzuwenden:

ng-class="{selected: $index==selectedIndex}"

Angular unterstützt jetzt Ausdrücke, die ein Objekt zurückgeben. Jede Eigenschaft (Name) dieses Objekts wird nun als Klassenname betrachtet und abhängig von seinem Wert angewendet.

Diese Wege sind jedoch nicht funktional gleich. Hier ist ein Beispiel:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

Wir könnten daher vorhandene CSS-Klassen wiederverwenden, indem wir eine Modelleigenschaft grundsätzlich einem Klassennamen zuordnen und gleichzeitig die CSS-Klassen außerhalb des Controller-Codes belassen.


1367
2017-11-29 11:17



ng-Klasse unterstützt einen Ausdruck, der entweder ausgewertet werden muss

  1. Eine Zeichenfolge mit durch Leerzeichen getrennten Klassennamen oder
  2. Ein Array von Klassennamen oder
  3. Eine Zuordnung / Objekt von Klassennamen zu booleschen Werten.

Mit Formular 3) können wir einfach schreiben

ng-class="{'selected': $index==selectedIndex}"

Siehe auch Wie setze ich CSS-Stile in AngularJS bedingt ein? für eine breitere Antwort.


Aktualisieren: Angular 1.1.5 hat Unterstützung für eine ternärer BetreiberWenn dir dieses Konstrukt also vertrauter ist:

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

432
2017-08-28 01:13



Meine bevorzugte Methode ist die Verwendung des ternären Ausdrucks.

ng-class="condition ? 'trueClass' : 'falseClass'"

Hinweis: Wenn Sie eine ältere Version von Angular verwenden, sollten Sie diese stattdessen verwenden.

ng-class="condition && 'trueClass' || 'falseClass'"

155
2017-09-27 13:39



Ich füge hinzu, weil einige dieser Antworten veraltet erscheinen. Hier ist, wie ich es mache:

<class="ng-class:isSelected">

Wobei 'isSelected' eine JavaScript-Variable ist, die innerhalb des Bereichs-Winkel-Controllers definiert ist.


Um Ihre Frage genauer zu formulieren, können Sie hier eine Liste erstellen:

HTML 

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>


JS 

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Item 1", "isSelected": "active"},  
        {"name": "Item 2", "isSelected": ""}
    ]
}


Sehen: http://jsfiddle.net/tTfWM/

Sehen: http://docs.angularjs.org/api/ng.directive:ngClass


53
2017-09-27 02:01



Hier ist eine viel einfachere Lösung:

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;
    
    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }
    
    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}
.selected {
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>


46
2017-10-17 13:55



Ich hatte kürzlich ein ähnliches Problem und entschied mich, nur einen bedingten Filter zu erstellen:

  angular.module('myFilters', []).
    /**
     * "if" filter
     * Simple filter useful for conditionally applying CSS classes and decouple
     * view from controller 
     */
    filter('if', function() {
      return function(input, value) {
        if (typeof(input) === 'string') {
          input = [input, ''];
        }
        return value? input[0] : input[1];
      };
    });

Es benötigt ein einzelnes Argument, das entweder ein 2-Elemente-Array oder eine Zeichenfolge ist, die in ein Array umgewandelt wird, das als zweites Element eine leere Zeichenfolge anfügt:

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>

26
2017-07-26 07:53



Wenn Sie über die binäre Auswertung hinausgehen und Ihr CSS aus Ihrem Controller heraushalten möchten, können Sie einen einfachen Filter implementieren, der die Eingabe für ein Map-Objekt auswertet:

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

So können Sie Ihr Markup folgendermaßen schreiben:

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>

21
2017-09-04 14:35



Ternärer Operator Ist soeben gewesen im eckigen Parser hinzugefügt 1.1.5.

Der einfachste Weg, dies zu tun, ist jetzt:

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

15
2018-05-23 08:32



Das war ich vor kurzem tat das:

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

Das isShowing value ist ein Wert, der sich auf meinem Controller befindet, der 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 hat einen kostenlosen Kurs, der von google auf AngularJS gesponsert wird, die über all diese Sachen geht und dann einige. Sie müssen nichts bezahlen, melden Sie sich einfach für ein Konto an und machen Sie sich auf den Weg! Viel Glück für euch alle!


15
2018-05-27 20:07