web-dev-qa-db-fra.com

conditionnels en ligne dans angular.js

Je me demandais s'il existait un moyen dans angular d'afficher de manière conditionnelle du contenu autre que l'utilisation de ng-show, etc.

<% if (myVar === "two") { %> show this<% } %>

mais dans angular, il me semble être limité à montrer et cacher des choses enveloppées dans des balises html

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

Quelle est la méthode recommandée dans angular pour afficher et masquer de manière conditionnelle le contenu en ligne dans angular simplement en utilisant {{}} plutôt qu'en encapsulant le contenu dans des balises html?

angularjsif-statementternary-operator
187
user1469779

EDIT: La réponse de 2Toad ci-dessous c'est ce que vous cherchez! Upvote cette chose

Si vous utilisez Angular <= 1.1.4, voici la réponse:

Une autre réponse à cela. Je poste une réponse séparée, car il s'agit davantage d'une tentative "exacte" de solution que d'une liste de solutions possibles:

Voici un filtre qui fera un "if immédiat" (alias iif):

app.filter('iif', function () {
   return function(input, trueValue, falseValue) {
        return input ? trueValue : falseValue;
   };
});

et peut être utilisé comme ceci:

{{foo == "bar" | iif : "it's true" : "no, it's not"}}
134
Ben Lesh

Angular 1.1.5 ajout du support pour les opérateurs ternaires:

{{myVar === "two" ? "it's true" : "it's false"}}
711
2Toad

Des milliers de façons de peler ce chat. Je me rends bien compte que vous posez une question spécifique entre {{}}, mais pour les autres qui viennent ici, je pense que cela vaut la peine de montrer certaines des autres options.

fonction sur votre $ scope (IMO, c'est votre meilleur pari dans la plupart des scénarios): 

  app.controller('MyCtrl', function($scope) {
      $scope.foo = 1;

      $scope.showSomething = function(input) {
           return input == 1 ? 'Foo' : 'Bar';
      };
   });

 <span>{{showSomething(foo)}}</span>

ng-show et ng-hide bien sûr:

 <span ng-show="foo == 1">Foo</span><span ng-hide="foo == 1">Bar</span>

ngSwitch

 <div ng-switch on="foo">
   <span ng-switch-when="1">Foo</span>
   <span ng-switch-when="2">Bar</span>
   <span ng-switch-default>What?</span>
 </div>

Un filtre personnalisé comme suggéré par Bertrand. (c'est votre meilleur choix si vous devez faire la même chose encore et encore) 

app.filter('myFilter', function() {
   return function(input) {
     return input == 1 ? 'Foo' : 'Bar';
   }
}

{{foo | myFilter}}

Ou une directive personnalisée:

app.directive('myDirective', function() {
   return {
     restrict: 'E',
     replace: true,
     link: function(scope, elem, attrs) {
       scope.$watch(attrs.value, function(v) {
          elem.text(v == 1 ? 'Foo': 'Bar');
       });
     }
   };
});


<my-directive value="foo"></my-directive>

Personnellement, dans la plupart des cas, je choisirais une fonction dans mon périmètre, elle maintiendrait le balisage assez propre, et sa mise en œuvre serait rapide et facile. À moins que vous ne fassiez la même chose encore et encore. Dans ce cas, j'irais de l'avant avec la suggestion de Bertrand et créons un filtre ou éventuellement une directive, selon les circonstances.

Comme toujours, , l’essentiel est que votre solution soit facile à gérer et puisse être testée. Et cela dépendra totalement de votre situation spécifique.

60
Ben Lesh

J'utilise ce qui suit pour définir de manière conditionnelle la classe attr lorsque la classe ng ne peut pas être utilisée (par exemple, lors du stylage de SVG):

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

La même approche devrait fonctionner pour d'autres types d'attributs.

(Je pense que vous devez être sur la dernière version instable Angular pour utiliser ng-attr-, je suis actuellement sur 1.1.4)

J'ai publié un article sur le travail avec AngularJS + SVG qui traite de ce sujet et de problèmes connexes. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

18
Ashley Davis

Pour vérifier un contenu variable et avoir un texte par défaut, vous pouvez utiliser:

<span>{{myVar || 'Text'}}</span>
15
ezequielc

Si je vous ai bien compris, je pense que vous avez deux façons de le faire.

Premièrement, vous pouvez essayer ngSwitch et la deuxième façon possible serait de créer votre propre filtre . NgSwitch est probablement la bonne approche, mais si vous souhaitez masquer ou afficher le contenu en ligne, il suffit d’utiliser le filtre {{}}.

Voici un violon avec un filtre simple à titre d'exemple.

<div ng-app="exapleOfFilter">
  <div ng-controller="Ctrl">
    <input ng-model="greeting" type="greeting">
      <br><br>
      <h1>{{greeting|isHello}}</h1>
  </div>
</div>

angular.module('exapleOfFilter', []).
  filter('isHello', function() {
    return function(input) {
      // conditional you want to apply
      if (input === 'hello') {
        return input;
      }
      return '';
    }
  });

function Ctrl($scope) {
  $scope.greeting = 'hello';
}
3
Bertrand

La bibliothèque d'interface utilisateur angulaire a une directive intégrée ui-if pour la condition dans le modèle/Vues jusqu'à angular ui 1.1.4

Exemple: Prise en charge dans Angular UI jusqu'à la version 1.1.4

<div ui-if="array.length>0"></div>

ng-si disponible dans toutes les angular version après 1.1.4

<div ng-if="array.length>0"></div>

si vous avez des données dans une variable de tableau, seul le div apparaîtra

3
JQuery Guru

si vous voulez afficher "Aucun" lorsque la valeur est "0", vous pouvez utiliser comme:

<span> {{ $scope.amount === "0" ?  $scope.amount : "None" }} </span>

ou vrai faux dans angular js

<span> {{ $scope.amount === "0" ?  "False" : "True" }} </span>
2
Rizo

Donc avec Angular 1.5.1 (la dépendance de l'application existante par rapport à d'autres dépendances de la pile MEAN est la raison pour laquelle je n'utilise actuellement pas la 1.6.4)

Cela fonctionne pour moi comme le dit le PO {{myVar === "two" ? "it's true" : "it's false"}}

{{vm.StateName === "AA" ? "ALL" : vm.StateName}}
2
Tom Stickel

Fonctionne même dans des situations exotiques:

<br ng-show="myCondition == true" />
1
Steffomio

Je vais jeter le mien dans le mélange:

https://Gist.github.com/btm1/6802312

ceci évalue l'instruction if une fois et n'ajoute aucun écouteur de surveillance MAIS vous pouvez ajouter un attribut supplémentaire à l'élément qui a la valeur set-if appelée wait-for = "somedata.prop" et attendra que cette donnée ou cette propriété soit définie avant. évaluer la déclaration si une fois. cet attribut supplémentaire peut être très pratique si vous attendez des données d'une requête XHR.

angular.module('setIf',[]).directive('setIf',function () {
    return {
      transclude: 'element',
      priority: 1000,
      terminal: true,
      restrict: 'A',
      compile: function (element, attr, linker) {
        return function (scope, iterStartElement, attr) {
          if(attr.waitFor) {
            var wait = scope.$watch(attr.waitFor,function(nv,ov){
              if(nv) {
                build();
                wait();
              }
            });
          } else {
            build();
          }

          function build() {
            iterStartElement[0].doNotMove = true;
            var expression = attr.setIf;
            var value = scope.$eval(expression);
            if (value) {
              linker(scope, function (clone) {
                iterStartElement.after(clone);
                clone.removeAttr('set-if');
                clone.removeAttr('wait-for');
              });
            }
          }
        };
      }
    };
  });
0
btm1