angularjs if déclarations?

Donc, je suis en cours d'exécution à travers le tutoriel pour AngularJS:

J'ai un tableau défini dans le contrôleur, et je retourne à différents points dans le tableau en appelant quand je suis en boucle sur les ng-repeat {{fonctionnalité.name}} {{fonctionnalité.description}}

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

alors, comment dois-je écrire une instruction if pour ce faire:

c'est à dire

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

aucune idée si c'est vrai, mais c'est ce que je veux faire

source d'informationauteur btm1

angularjs if-statement

11

Je ne pense pas qu'il y est if déclaration.
Pour votre style de but, ng-class peut être utilisé.
```
<p ng-class="{important: feature.importance == 10 }">
```
ng-switch est également pratique.

-- update --

prendre un coup d'oeil à:
https://stackoverflow.com/a/18021855/1238847

angular1.2.0 RC semble avoir ng-si la prise en charge.

Fait il est un opérateur ternaire Angulaire 1.2.0.

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

6

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

Précédemment, vous pouvez utiliser ngIf directive de AngularUI projet (code ici si vous voulez le télécharger), les mauvaises nouvelles sont qu'il n'est plus maintenue.

La bonne nouvelle, c'est qu'il a été ajouté à l'agent AngularJS repo (la branche unstable) et sera bientôt disponible dans la stable.
```
<div ng-if="something"> Foo bar </div>
```
Ne sera pas seulement de cacher les DIV élément, mais le supprimer de DOM (quand quelque chose est falsy).
3

ng-classe est probablement la meilleure réponse à votre question, mais AngularUI a un "si" directive:

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

de recherche pour:
Supprimer des éléments dans le DOM complètement au lieu de simplement s'en cacher.

J'ai utilisé "ui-si" pour décider si je dois rendre une valeur de données d'une étiquette ou d'une entrée, par rapport au mois actuel:
```
<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>
```
3

Dans le cas où votre priorité serait une étiquette, vous pouvez créer un commutateur de filtre à utiliser à l'intérieur de ng-classe, comme indiqué dans un précédent DONC réponse : https://stackoverflow.com/a/8309832/1036025 (pour le commutateur de filtre code)
```
<p ng-class="feature.importance|switch:{'Urgent':'red', 'Warning': 'orange', 'Normal': 'green'}">...</p>
```
1

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.

Cette première est une directive qui évalue si quelque chose doit être dans les DOM qu'une seule fois et n'ajoute pas de regarder les auditeurs à 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');
              });
            }
          }
        };
      }
    };
  });

Cette seconde est une directive conditionnelle s'applique attributs d'éléments qu'une seule fois, sans regarder les auditeurs:

c'est à dire

<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, vous pouvez utiliser la version dynamique intégré dans angulaire:

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

Vous pouvez également utiliser la nouvelle ng-si ajouté par angularjs qui, fondamentalement, remplace l'interface utilisateur si elle est créée par la angularui équipe ces conditionnellement ajouter et supprimer des éléments du DOM et ajouter de surveillance des auditeurs de garder de l'évaluation: les

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

Également ce qui fonctionne est:

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

Vous devez vous connecter pour publier un commentaire.