AngularJS ng-if con più condizioni


151

Vorrei sapere se è possibile avere qualcosa del genere:

div ng-repeat="(k,v) in items"
<div ng-if="k == 'a' || k == 'b'">
    <!-- SOME CONTENT -->
</div>

Sapendo che gli elementi è un contenitore JSON ricevuto attraverso una richiesta, ecco perché sto usando un metodo chiave e di valore.

Grazie

Lo sto chiedendo perché ho provato a cercarlo su Google, ma l'unico risultato che ho potuto ottenere era con ng-switch, ma devo usare ng-if.


3
In JavaScript, l'operatore o è ||.
JB Nizet,

Risposte:


194

Certo che puoi. Qualcosa di simile a:

HTML

<div ng-controller="fessCntrl">    
     <label ng-repeat="(key,val) in list">
       <input type="radio" name="localityTypeRadio" ng-model="$parent.localityTypeRadio" ng-value="key" />{{key}}
         <div ng-if="key == 'City' || key == 'County'">
             <pre>City or County !!! {{$parent.localityTypeRadio}}</pre>
         </div>
         <div ng-if="key == 'Town'">
             <pre>Town!!! {{$parent.localityTypeRadio}}</pre>
         </div>        
      </label>
</div>

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {

    $scope.list = {
        City: [{name: "cityA"}, {name: "cityB"}],
        County: [{ name: "countyA"}, {name: "countyB"}],
        Town: [{ name: "townA"}, {name: "townB"}]
      };

    $scope.localityTypeRadio = 'City';
});

fessmodule.$inject = ['$scope'];

Demo Fiddle


Se ho 20 campi di input e devo abilitare il pulsante di invio solo se tutti i campi sono compilati. In questo caso, devo includere così tante condizioni. Questo è un po 'confuso. C'è qualche altra soluzione possibile?
Mr_Perfect il

@CharanCherry Dai un'occhiata alla validazione della forma angolare. In questo modo è possibile impostare tutti i campi desiderati ng richiesti e verificare la validità del modulo, ad esempio un'espressione ng disabilitata sul pulsante di invio. cfr fdietz.github.io/recipes-with-angular-js/using-forms/…
Gecko IT

76

Operatore OR:

<div ng-repeat="k in items">
    <div ng-if="k || 'a' or k == 'b'">
        <!-- SOME CONTENT -->
    </div>
</div>

Anche se è abbastanza semplice da leggere, spero che come sviluppatore usi nomi migliori di 'a' 'k' 'b' ecc.

Per esempio:

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin || group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

Un altro esempio OR

<p ng-if="group.title != 'Dispatcher News' or group.title != 'Coordinator News'" style="padding: 5px;">No links in group.</p>

Operatore AND (per coloro che si imbattono in questa risposta dello stackoverflow alla ricerca di una condizione AND anziché OR)

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin && group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

Ok, quindi tutti i browser sembrano riconoscere il &carattere valido. Ma va detto che l'utilizzo &in un attributo non è html valido. Vedi < html.spec.whatwg.org/multipage/syntax.html#syntax-attributes >, in particolare: "I valori degli attributi sono una combinazione di riferimenti di testo e caratteri, tranne con l'ulteriore limitazione che il testo non può contenere una e commerciale ambigua. " Vedi anche questa risposta: < stackoverflow.com/a/5320217/788553 >.
jmlopez,

Se dovessimo usare le istruzioni composte in HTML per fare un lavoro angolare, preferirei mettere le istruzioni composte in una funzione collegata all'ambito, rimuovendo così quella logica dalla sezione HTML.
jmlopez,

HTML5 non è stato scritto pensando ad Angular. Invece i bravi ragazzi di Google hanno scritto Angular invece - approfittare delle specifiche e quindi scrivere un'espressione angolare con "&" è molto normale. Certo, preferisco non mettere le regole di business nella vista, proprio come quando faccio pagine Razor View in asp.net MVC, ma la mia risposta è completamente nel contesto della domanda che viene posta.
Tom Stickel,

1
Non c'è niente di sbagliato nella tua risposta Tom, scrivo anche dichiarazioni composte come quelle che mostri perché sono pigro (o di fretta), e funziona. Ma poi ricordo sempre questa regola sull'evasione &. Questa è la ragione per cui mi sono imbattuto nella tua risposta. Volevo solo mettere lì quei collegamenti per rendere le persone consapevoli delle specifiche HTML, come hai detto tu, "HTML5 non è stato scritto pensando ad Angular".
jmlopez,

1

puoi anche provare con && per la consegna obbligatoria se entrambe le condizioni sono vere del lavoro

//div ng-repeat="(k,v) in items"

<div ng-if="(k == 'a' &&  k == 'b')">
    <!-- SOME CONTENT -->
</div>

0

Codice JavaScript

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}

0

Codice HTML

<div ng-app>
<div ng-controller='ctrl'>
    <div ng-class='whatClassIsIt(call.state[0])'>{{call.state[0]}}</div>
    <div ng-class='whatClassIsIt(call.state[1])'>{{call.state[1]}}</div>
    <div ng-class='whatClassIsIt(call.state[2])'>{{call.state[2]}}</div>
    <div ng-class='whatClassIsIt(call.state[3])'>{{call.state[3]}}</div>
    <div ng-class='whatClassIsIt(call.state[4])'>{{call.state[4]}}</div>
    <div ng-class='whatClassIsIt(call.state[5])'>{{call.state[5]}}</div>
    <div ng-class='whatClassIsIt(call.state[6])'>{{call.state[6]}}</div>
    <div ng-class='whatClassIsIt(call.state[7])'>{{call.state[7]}}</div>
</div>

Codice JavaScript

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}

Potresti per favore combinare le tue risposte in una ed eliminare l'altra?
Tom M,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.