在未定义的值上使用ng-show！使ng-show按the

Question

我试图只在model.Order.Enabled === false时隐藏/显示<p>，但是如果我像下面一样使用ng-show，那么model.Order.Enabled将是null，直到API返回true或false。然后，因为我的ng-show使用!model.Order.Enabled，所以它的计算结果是!null，Angular将其视为真，因此<p>将显示在DOM中，即使它可能不是这样(如果API返回并告诉我model.Order.Enabled == true)。

<p ng-show="!model.Order.Enabled" style="color:#2660C6">Here is some text to show only when model.Order.Enabled === false</p>

这导致我的<p>在等待响应时显示了大约2秒，然后就消失了。这只是一种我必须在ng-show anywhere中添加更多逻辑的情况吗?这种情况会发生(这是很多)？

Answer 1

要完全隐藏/显示DOM中的元素，请使用ngIf，如下所示：

// let's suppose we're checking against foo.dataLoaded


<p ng-if="foo.dataLoaded">Element is displayed if truthy</p>
<p ng-if="!foo.dataLoaded">Element is displayed if falsey</p>

为了确保作用域属性的布尔值正确无误，您应该在获取数据时使用promise。例如，您可以从$scope.foo.dataLoaded =false开始，然后在promise函数中将其设置为true