css più - Qual è il modo migliore per applicare in modo condizionale una classe?

Probabilmente questo verrà downvoted all'oblio, ma ecco come ho usato gli operatori ternari di 1.1.5 per cambiare classe a seconda che una riga in una tabella sia la prima, la metà o l'ultima - eccetto se c'è una sola riga nella tabella:

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>

Ecco un'altra opzione che funziona bene quando non è possibile utilizzare ng-class (ad esempio quando si disegna SVG):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(Penso che tu debba essere sull'ultimo angolare instabile per usare ng-attr-, al momento sono su 1.1.4)

parziale

  <div class="col-md-4 text-right">
      <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
      <a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
  </div>

controllore

  $scope.campaign_range = "all";
  $scope.change_range = function(range) { 
        if (range === "all")
        {
            $scope.campaign_range = "all"
        }
        else
        {  
            $scope.campaign_range = "thismonth"
        }
  };

L'ho fatto di recente che stava facendo questo:

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

Il valore isShowing è un valore che si trova sul mio controller che viene attivato con il clic di un pulsante e le parti tra le singole parentesi sono le classi che ho creato nel mio file css.

EDIT: Vorrei anche aggiungere che codeschool.com ha un corso gratuito sponsorizzato da google su AngularJS che ripercorre tutte queste cose e poi alcune. Non è necessario pagare nulla, basta registrarsi per un account e iniziare! Buona fortuna a tutti voi!

Controlla http://www.codinginsight.com/angularjs-if-else-statement/

Il famigerato angularjs se altro affermazione !!! Quando ho iniziato ad usare Angularjs, ero un po 'sorpreso di non riuscire a trovare un'istruzione if / else.

Quindi stavo lavorando a un progetto e ho notato che quando si utilizzava l'istruzione if / else, la condizione veniva visualizzata durante il caricamento. Puoi usare ng-cloak per risolvere questo problema.

<div class="ng-cloak">
 <p ng-show="statement">Show this line</span>
 <p ng-hide="statement">Show this line instead</span>
</div>

.ng-cloak { display: none }

Grazie amadou

Se vuoi andare oltre la valutazione binaria e tenere il tuo CSS fuori dal tuo controller, puoi implementare un semplice filtro che valuta l'input rispetto a un oggetto della mappa:

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

Questo ti permette di scrivere il tuo markup in questo modo:

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

Puoi usare this pacchetto npm. Gestisce tutto e ha opzioni per classi statiche e condizionali basate su una variabile o una funzione.

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />

ng-class supporta un'espressione che deve valutare entrambi

1. Una stringa di nomi di classi delimitati da spazio, o
2. Una serie di nomi di classi, o
3. Una mappa / oggetto di nomi di classi in valori booleani.

Quindi, usando il modulo 3) possiamo semplicemente scrivere

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

Vedi anche Come faccio a applicare in modo condizionale stili CSS in AngularJS? per una risposta più ampia

Aggiornamento : Angular 1.1.5 ha aggiunto il supporto per un operatore ternario , quindi se quel costrutto ti è più familiare:

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

Aggiungo solo qualcosa che ha funzionato per me oggi, dopo molte ricerche ...

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

Spero che questo aiuti nel tuo sviluppo di successo.

=)

Sintassi di espressioni non documentate: Link al sito web grande ... =)

Questo è nel mio lavoro giudicare condizionatamente più volte:

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>

Se si utilizza l'angolare pre v1.1.5 (ovvero nessun operatore ternario) e si desidera comunque un modo equivalente per impostare un valore in entrambe le condizioni, è possibile fare qualcosa del genere:

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"

Sono nuovo di Angular ma ho trovato questo per risolvere il mio problema:

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

Ciò applicherà condizionalmente una classe basata su una var. Inizia con un download di icone di default, usando la classe ng, controllo lo stato di showDetails se true/false e applico l' icona di classe -upload . Funziona alla grande.

Spero che sia d'aiuto.

Il mio metodo preferito è l'uso dell'espressione ternaria.

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

Nota: in caso di utilizzo di una versione precedente di Angular, dovresti utilizzare questo,

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

Se non vuoi mettere i nomi delle classi CSS in Controller come faccio io, ecco un vecchio trucco che uso fin dai tempi pre-v1. Possiamo scrivere un'espressione che valuta direttamente il nome di una classe selezionata , non sono necessarie direttive personalizzate:

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

Si prega di notare la vecchia sintassi con due punti.

C'è anche un nuovo modo migliore di applicare le classi in modo condizionale, come:

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

Angular ora supporta espressioni che restituiscono un oggetto. Ogni proprietà (nome) di questo oggetto è ora considerata come un nome di classe e viene applicata in base al suo valore.

Tuttavia questi modi non sono funzionalmente uguali. Ecco un esempio:

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

Potremmo quindi riutilizzare le classi CSS esistenti, essenzialmente mappando una proprietà del modello a un nome di classe e allo stesso tempo mantenendo le classi CSS fuori dal codice del controller.

Ecco una soluzione molto più semplice:

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>

L'operatore ternario è stato appena aggiunto al parser angolare in 1.1.5 .

Quindi il modo più semplice per farlo è ora:

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

Possiamo creare una funzione per gestire la classe di ritorno con condizioni

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    switch(strValue) {
                        case "It is Red":return "Red";break;
                        case "It is Yellow":return "Yellow";break;
                        case "It is Blue":return "Blue";break;
                        case "It is Green":return "Green";break;
                        case "It is Gray":return "Gray";break;
                    }
                }
        }]);
</script>

E poi

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

È possibile fare riferimento alla tabella completa dei codici di classe ng, ad esempio

Basandomi sulla mia esperienza con le modalità AngularJS, ritengo che l'approccio più elegante sia un servizio dedicato al quale possiamo fornire un modello (HTML) parziale da visualizzare in modal.

Quando ci pensiamo, le modali sono una specie di rotte AngularJS ma sono visualizzate solo in popup modali.

Il progetto bootstrap di AngularUI ( http://angular-ui.github.com/bootstrap/ ) ha un eccellente servizio $modal (usato per essere chiamato $ dialog prima della versione 0.6.0) che è un'implementazione di un servizio per mostrare la parte contenuto come popup modale.