Angularjs si les déclarations?

Question

Je suis donc en train de parcourir le tutoriel pour AngularJS :

J'ai un tableau défini dans le contrôleur et je renvoie différents points du tableau en appelant lorsque je boucle sur ng-repeat {{feature.name}} {{feature.description}}

Ce que je ne comprends pas, c'est que disons que j'ai un troisième point dans le tableau appelé "importance" et que c'est un nombre de 1 à 10.Je ne veux pas afficher ce numéro dans le code HTML, mais ce que je veux faire, c'est appliquer une couleur différente à la fonctionnalité si ce numéro "d'importance" dans le tableau est 10 contre 1.

alors, comment puis-je écrire une instruction if pour faire ceci :

c'est à dire.

<p style="**insert if statement: {{if feature.importance == 10}} color:red; {{/if}} **">{{feature.description}}</p>

je ne sais pas si c'est vrai mais c'est ce que je veux faire

Answer 1

Ce premier est une directive qui évalue si quelque chose devrait être dans le DOM une seule fois et n'ajoute aucun auditeurs de surveillance à la page:

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');
              });
            }
          }
        };
      }
    };
  });

Ce second est une directive qui applique conditionnellement des attributs aux éléments une seule fois sans regarder les auditeurs:

I.e.

<div set-attr="{ data-id : post.id, data-name : { value : post.name, condition : post.name != 'FOO' } }"></div>

angular.module('setAttr',[]).directive('setAttr', function() {
  return {
    restrict: 'A',
    priority: 100,
    link: function(scope,elem,attrs) {
      if(attrs.setAttr.indexOf('{') != -1 && attrs.setAttr.indexOf('}') != -1) {
      //you could just angular.isObject(scope.$eval(attrs.setAttr)) for the above but I needed it this way
        var data = scope.$eval(attrs.setAttr);

        angular.forEach(data, function(v,k){

          if(angular.isObject(v)) {
            if(v.value && v.condition) {
                elem.attr(k,v.value);
                elem.removeAttr('set-attr');
            }
          } else {
            elem.attr(k,v);
            elem.removeAttr('set-attr');
          }
        });
      }
    }
  }
});

Bien sûr, votre peut utiliser des versions dynamiques intégrées à angular:

<div ng-class="{ 'myclass' : item.iscool }"></div>

Vous pouvez également utiliser la nouvelle NG-si elle est ajoutée par angularjs qui remplace fondamentalement l'interface utilisateur, si elle est créée par l'équipe angularui, elles ajoutent et suppriment des objets de la DOM et d'ajouter des auditeurs de surveillance pour continuer à évaluer:

<div ng-if="item.iscool"></div>

Answer 2

je ne pense pas qu'il y ait if déclaration disponible.Pour votre style, ng-class peut être utilisé.

<p ng-class="{important: feature.importance == 10 }">

ng-switch est également pratique.

-- mise à jour --

jeter un coup d'œil à:https://stackoverflow.com/a/18021855/1238847

angulaire1.2.0RC semble avoir le support ng-if.

Answer 3

effectivement il y a un opérateur ternaire en angulaire 1.2.0.

<p style="{{feature.importance == 10 ? 'color:red' : ''}}">{{feature.description}}</p>

Answer 4

Je pense que la réponse nécessite une mise à jour.

Auparavant, vous pouviez utiliser la directive ngIf du projet AngularUI (code ici si vous souhaitez quand même le télécharger), la mauvaise nouvelle est qu'il n'est plus maintenu.

La bonne nouvelle est qu'il a été ajouté au dépôt officiel AngularJS (branche instable) et sera bientôt disponible dans le stable.

<div ng-if="something"> Foo bar </div>

Ne se contentera pas de cacher le DIV élément, mais supprimez-le également du DOM (quand quelque chose est faux).

Answer 5

NG-Class est probablement la meilleure réponse à votre problème, mais Angularui a une directive "si":

http://angular-ui.github.com/

Rechercher: Supprimer les éléments du DOM complètement au lieu de le masquer.

J'ai utilisé "UI-si" pour décider si je devrais rendre une valeur de données comme une étiquette ou une entrée, par rapport au mois en cours:

<tbody id="allocationTableBody">
    <tr ng-repeat="a in data.allocations">
        <td>{{a.monthAbrv}}</td>
        <td ui-if="$index < currentMonth">{{a.amounts[0]}}</td>
    </tr>
</tbody>

Answer 6

Dans le cas où votre priorité serait une étiquette, vous pouvez créer un filtre à utiliser à l'intérieur de la classe NG, comme indiqué dans une réponse précédente: https://stackoverflow.com/a/8309832/1036025 (pour le code de filtrage de commutation)

<p ng-class="feature.importance|switch:{'Urgent':'red', 'Warning': 'orange', 'Normal': 'green'}">...</p>

Answer 7

Vous pouvez également essayer cette ligne de code ci-dessous

<div class="{{is_foo && foo.bar}}">

qui montre foo.bar si is_foo est vrai.

Answer 8

Qu'est-ce qui fonctionne également est:

<span>{{ varWithValue || 'If empty use this string' }}</span>