conditionnels en ligne dans angular.js

Question

Je me demandais s'il y avait un moyen dans angular d'afficher le contenu de manière conditionnelle autre que l'utilisation de ng-show, etc. Par exemple, dans backbone.js, je pourrais faire quelque chose avec du contenu en ligne dans un modèle, par exemple :

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

mais dans angular, il semble que je sois limité à l'affichage et à la dissimulation des éléments enveloppés 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 conditionnellement du contenu en ligne en utilisant simplement {{}} plutôt que d'envelopper le contenu dans des balises html ?

Answer 1

Angular 1.1.5 ajout de la prise en charge des opérateurs ternaires :

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

Answer 2

EDIT : Réponse de 2Toad ci-dessous est ce que vous recherchez ! Upvotez cette chose

Si vous utilisez Angular <= 1.1.4, cette réponse fera l'affaire :

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

Voici un filtre qui fera un "if immédiat" (aka 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"}}

Answer 3

Il y a des milliers de façons d'aborder ce sujet. Je réalise que votre question concerne spécifiquement les {{}}, mais pour les autres qui viennent ici, je pense qu'il est utile de montrer certaines des autres options.

sur votre $scope (IMO, c'est votre meilleure chance 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 le suggère 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, j'opterais pour une fonction sur mon champ d'application, ce qui permet de garder le balisage assez propre, et c'est rapide et facile à mettre en œuvre. À moins que vous ne fassiez exactement la même chose encore et encore, auquel cas je suivrais la suggestion de Bertrand et créerais un filtre ou éventuellement une directive, selon les circonstances.

Comme toujours, le plus important est que votre solution soit facile à maintenir. et j'espère qu'elle pourra être testée. Et cela va dépendre complètement de votre situation spécifique.

Answer 4

J'utilise ce qui suit pour définir de manière conditionnelle l'attr de la classe lorsque ng-class ne peut pas être utilisé (par exemple pour styliser un SVG) :

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

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

(Je pense que vous devez être sur la dernière version instable d'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 des questions connexes. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

Answer 5

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

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