AngularJS ng-if avec plusieurs conditions

151

J'aimerais savoir s'il est possible d'avoir quelque chose comme ça:

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

Sachant que les éléments sont un conteneur JSON reçu via une requête, c'est pourquoi j'utilise une méthode clé, valeur.

Merci

Je demande parce que j'ai essayé de le googler, mais le seul résultat que j'ai pu obtenir était avec ng-switch, mais je dois l'utiliser ng-if.

TurnsCoffeeIntoScripts
la source
3
En JavaScript, l'opérateur or est ||.
JB Nizet

Réponses:

194

Sûr que vous pouvez. Quelque chose comme:

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'];

Démo Fiddle

Maxime Shoustin
la source
Si j'ai 20 champs de saisie et que je dois activer le bouton de soumission uniquement si tous les champs sont remplis. Dans ce cas, je dois inclure autant de conditions. C'est un peu déroutant. Existe-t-il une autre solution possible?
Mr_Perfect
@CharanCherry Jetez un œil à la validation de la forme angulaire. De cette façon, vous pouvez définir tous les champs souhaités ng-required et vérifier la validité du formulaire dans, par exemple, une expression ng-disabled sur le bouton d'envoi. cfr fdietz.github.io/recipes-with-angular-js/using-forms
Gecko IT
76

Opérateur OR:

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

Même s'il est assez simple à lire, j'espère qu'en tant que développeur, vous utilisez de meilleurs noms que «a» «k» «b» etc.

Par exemple:

<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 autre exemple OR

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

Opérateur AND (Pour ceux qui trébuchent sur cette réponse stackoverflow à la recherche d'une condition AND au lieu de 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>
Tom Stickel
la source
Ok, donc tous les navigateurs semblent reconnaître le &comme un caractère valide. Mais il convient de mentionner que l'utilisation &dans un attribut n'est pas un html valide. Voir < html.spec.whatwg.org/multipage/syntax.html#syntax-attributes >, plus spécifiquement: "Les valeurs d'attribut sont un mélange de références de texte et de caractères, sauf avec la restriction supplémentaire que le texte ne peut pas contenir une esperluette ambiguë. " Consultez également cette réponse: < stackoverflow.com/a/5320217/788553 >.
jmlopez
Si nous devons utiliser des instructions composées en html pour faire un travail angulaire, je préférerais placer les instructions composées dans une fonction attachée à la portée, supprimant ainsi cette logique de la section html.
jmlopez
HTML5 n'a pas été écrit avec Angular à l'esprit. Au lieu de cela, les brillants gars de Google ont écrit Angular à la place - profiter de la spécification et donc écrire une expression angulaire avec "&" est très normal. Bien sûr, je préfère ne pas mettre de règles métier dans la vue, tout comme lorsque je fais des pages Razor View dans asp.net MVC, mais ma réponse est complètement dans le contexte de la question posée.
Tom Stickel
1
Il n'y a rien de mal avec votre réponse Tom, j'écris aussi des déclarations composées comme celles que vous montrez parce que je suis paresseux (ou pressé), et ça marche. Mais ensuite, je me souviens toujours de cette règle sur l'évasion &. C'est la raison pour laquelle je suis tombé sur votre réponse. Je voulais juste mettre ces liens là-bas pour sensibiliser les gens à la spécification HTML, comme vous l'avez dit, "HTML5 n'a pas été écrit avec Angular à l'esprit".
jmlopez
1

vous pouvez également essayer avec && pour la constion obligatoire si les deux conditions sont vraies que fonctionnent

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

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

Code 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";
}
}
Narasimhamurthy GN
la source
0

Code 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>

Code 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";
}
}
Narasimhamurthy GN
la source
Pourriez-vous s'il vous plaît combiner vos réponses en une et supprimer l'autre?
Tom M