web-dev-qa-db-fra.com

AngularJS - Valeur vide de la chaîne de contrôle ng-if

c'est un exemple simple:

<a ng-if="item.photo == ''" href="#/details/{{item.id}}"><img src="/img.jpg" class="img-responsive"></a>
<a ng-if="item.photo != ''" href="#/details/{{item.id}}"><img ng-src="/{{item.photo}}" class="img-responsive"></a>

Je vois qu'il génère toujours la condition item.photo != '' même si la valeur est vide. Pourquoi?

angularjs
42
Tony

Vous n'avez pas besoin d'utiliser explicitement des qualificateurs tels que item.photo == '' ou item.photo != ''. Comme en JavaScript, une chaîne vide sera évaluée comme fausse. 

Vos points de vue seront également beaucoup plus propres et lisibles. 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app init="item = {photo: ''}">
   <div ng-if="item.photo"> show if photo is not empty</div>
   <div ng-if="!item.photo"> show if photo is empty</div>
  
   <input type=text ng-model="item.photo" placeholder="photo" />
</div

Mise à jour pour supprimer le bogue dans Angular

102
Martin

Probablement votre item.photo est undefined si vous n'avez pas d'attribut photo sur l'élément en premier lieu et donc undefined != ''. Mais si vous mettiez du code pour montrer comment vous fournissez des valeurs à item, cela vous aiderait.

PS: Désolé de poster ceci comme réponse (je pense plutôt que c'est plus un commentaire), mais je n'ai pas encore assez de réputation.

9
iulian

Si par "vide" vous voulez dire undefined, c'est la façon dont les expressions-ng sont interprétées. Ensuite, vous pouvez utiliser:

<a ng-if="!item.photo" href="#/details/{{item.id}}"><img src="/img.jpg" class="img-responsive"></a>
7
n00dl3

C'est ce qui peut arriver, si la valeur de item.photo n'est pas définie, alors item.photo != '' sera toujours indiqué comme étant vrai. Et si vous pensez logiquement que cela a du sens, item.photo n'est pas une chaîne vide (donc cette condition devient vraie) puisqu'il s'agit de undefined.

Maintenant, pour les personnes qui essaient de vérifier si la valeur de input est vide ou non dans Angular 6 , on peut utiliser cette approche. 

Disons que ceci est le champ de saisie - 

<input type="number" id="myTextBox" name="myTextBox"
 [(ngModel)]="response.myTextBox"
            #myTextBox="ngModel">

Pour vérifier si le champ est vide ou non, cela devrait être le script.

<div *ngIf="!myTextBox.value" style="color:red;">
 Your field is empty
</div>

Notez la différence subtile entre la réponse ci-dessus et cette réponse. J'ai ajouté un attribut supplémentaire .value après mon nom d'entrée myTextBox. 
Je ne sais pas si la réponse ci-dessus a fonctionné pour la version ci-dessus de Angular, mais pour Angular 6 , voici comment procéder.

0
Rito