webentwicklung-frage-antwort-db.com.de

AngularJS - ng - wenn leerer Wert der Zeichenfolge überprüft wird

es ist ein einfaches Beispiel:

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

Ich sehe, es erzeugt immer die item.photo != ''-Bedingung, auch wenn der Wert leer ist. Warum?

angularjs
42
Tony

Sie müssen nicht explizit Qualifier wie item.photo == '' oder item.photo != '' verwenden. Wie in JavaScript wird eine leere Zeichenfolge als falsch bewertet. 

Ihre Ansichten werden auch viel sauberer und lesbarer sein. 

<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

Aktualisiert, um Fehler in Angular zu entfernen

102
Martin

Wahrscheinlich ist Ihr item.photoundefined, wenn Sie überhaupt kein Fotoattribut für einen Artikel und somit undefined != '' haben. Wenn Sie jedoch etwas Code eingeben, um zu zeigen, wie Sie Werte für item angeben, ist dies hilfreich.

PS: Tut mir leid, dies als Antwort zu posten (ich denke eher, dass es eher ein Kommentar ist), aber ich habe noch nicht genug Ansehen.

9
iulian

Wenn Sie mit "leer" undefined meinen, werden Ng-Ausdrücke auf diese Weise interpretiert. Dann könnten Sie verwenden:

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

Dies kann passieren, wenn der Wert von item.photo undefiniert ist, dann wird item.photo != '' immer als wahr angezeigt. Und wenn Sie logisch denken, dass es tatsächlich Sinn macht, ist item.photo keine leere Zeichenfolge (daher wird diese Bedingung wahr), da es undefined ist.

Nun können Personen, die versuchen zu prüfen, ob der Wert der Eingabe in Angular 6 leer ist oder nicht, diese Methode verwenden. 

Nehmen wir an, dies ist das Eingabefeld - 

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

Um zu überprüfen, ob das Feld leer ist oder nicht, sollte dies das Skript sein.

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

Beachten Sie den subtilen Unterschied zwischen der obigen Antwort und dieser Antwort. Ich habe ein zusätzliches Attribut .value nach meinem Eingabenamen myTextBox hinzugefügt. 
Ich weiß nicht, ob die obige Antwort für die obige Version von Angular funktioniert, aber für Angular 6 So sollte es gemacht werden.

0
Rito