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.