2014-12-09 10 views
34

è un semplice esempio:AngularJS - ng-se stringa controllo valore vuoto

<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> 

vedo genera sempre la condizione item.photo != '' anche se il valore è vuoto. Perché?

+0

vuoi dire che ha ancora 'ng-if = "item.photo! = ''"' Attributo? – dfsq

+1

Non correlato, ma questo sembra un sacco di duplicazione per il solo cambiamento della sorgente dell'immagine. –

+0

Forse 'item.photo' non è una stringa vuota, ma' null' o 'undefined'? –

risposta

84

Non è necessario utilizzare in modo esplicito qualificatori come item.photo == '' o item.photo != ''. Come in JavaScript, una stringa vuota verrà valutata come falsa.

Le tue visualizzazioni saranno molto più pulite e leggibili.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/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

+3

Sebbene semplice e pulita, questa risposta nasconde un piccolo bug, che potrebbe non avere importanza per te. Guarda cosa succede quando inserisci uno di: 0, n o f. Non sono riuscito a trovare alcuna documentazione a riguardo o un problema aperto. –

+1

Sì - questo è un problema con le versioni precedenti di AnguarJS (1.2.xe precedenti). Esiste nella versione ospitata su stackexchange. Questo bug è stato corretto in 1.3.0 https://github.com/angular/angular.js/commit/bdfc9c02d021e08babfbc966a007c71b4946d69d – Martin

+0

yuhu fantastico .... –

7

Se con "vuoto" si intende undefined, è il modo in cui vengono interpretate le espressioni ng. Quindi, è possibile utilizzare:

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

probabilmente la item.photo è undefined se non si dispone di un attributo di foto sul prodotto in primo luogo e quindi undefined != ''. Ma se metti un po 'di codice per mostrare come fornire valori a item, sarebbe di aiuto.

PS: Mi spiace pubblicare questo come risposta (penso piuttosto che sia più un commento), ma non ho ancora abbastanza reputazione.

Problemi correlati