web-dev-qa-db-fra.com

Angularjs if/else

<div class="company_name" ng-controller="CompanyName">
 <h1 class="left">
     {{data.company_name}}
 </h1>
</div>

Ce que j'aimerais faire, c'est de faire en sorte que si data.company_name n'a pas été ajouté via un champ de saisie, il indique un espace réservé "Nom de la société", comment cela peut-il être fait avec angularjs?

9
Xeen

Vous pouvez utiliser ng-if et faire quelque chose comme

<div class="company_name" ng-controller="CompanyName">
 <h1 class="left">
     <span ng-if="data.company_name === ''">
       // Some placeholder
     </span>
     <span ng-if="data.company_name !== ''">
       {{data.company_name}}
     </span>
 </h1>
</div>

BTW ngIf est une nouvelle directive ajoutée à la v1.1.5. Vous devrez donc peut-être mettre à jour votre version angulaire.

Voir mon plunker ici: http://plnkr.co/edit/qiN2XshEpay6e6zzhUKP

29
Nicolas ABRIC

Pour utiliser ng-if, ng-else-if et ng-else dans votre projet, utilisez ceci:

https://github.com/zachsnow/ng-Elif

1
Aqib Mumtaz

Un moyen de garder le code propre consiste à utiliser un filtre. Ce morceau de code ajoute une classe à un onglet actif.

var filters = angular.module('filters');
filters.filter('ie', function(){
  return function(v, yes, no){
      return v ? yes : no;
  };
});

Modèle

<li class="{{activeTab == 'home' | ie: 'active-class':''}}">
    Home
</li>
1
Kristo Aun

Vous pouvez utiliser ng-if condition pour le nom de la société de contrôle vlaue. Prenons l'exemple de 

 <span ng-if="driver.status_flag == 1">
    <i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
 </span>

Dans l'exemple ci-dessus, la condition status_flag de la condition est égale à 1, puis la valeur d'envergure intérieure s'affiche. De même avec votre cas, vous pouvez ajouter une déclaration comme

<span ng-if="data.company_name === ''">
        <i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
     </span>
0
Nikunj K.