AngularJS - ng-if 检查字符串空值

Question

这是一个简单的例子：

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

我看到它总是生成item.photo != ''条件，即使值为空。为什么？

Answer 1

您不需要显式使用限定符，例如 item.photo == '' 或 item.photo != '' 。就像在 JavaScript 中一样，空字符串将被评估为 false。

您的视图也将更加清晰和可读。

<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

更新以删除 Angular 中的错误

Answer 2

如果您

首先在项目上没有照片属性，因此undefined != ''，则可能您的item.photo undefined。但是，如果您放置一些代码来显示如何向item提供值，则会有所帮助。

PS：很抱歉将此作为答案发布（我宁愿认为这更像是一个评论），但我还没有足够的声誉。

Answer 3

如果"空"是指undefined，那就是ng表达式的解释方式。然后，您可以使用：

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

Answer 4

这是可能发生的事情，如果item.photo的值未定义，则item.photo != ''将始终显示为 true。如果你从逻辑上思考它实际上是有道理的，item.photo不是一个空字符串（所以这个条件成真），因为它是undefined .

现在，对于试图在 Angular 6 中检查输入值是否为空的人，可以通过这种方法。

假设这是输入字段 -

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

要检查该字段是否为空，这应该是脚本。

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

请注意上述答案和这个答案之间的细微差别。我在输入名称 myTextBox 之后添加了一个额外的属性.value。
我不知道上面的答案是否适用于上述版本的 Angular，但对于 Angular 6 来说，这就是应该这样做的方式。