对带有！的未定义值使用ng show！导致ng节目被truthy

Question

我试图仅在model.Order.Enabled === false时隐藏/显示<p>，但如果我像下面那样使用ng-show，那么model.Order.Enabled将是null，直到API返回true或false。然后，由于我的ng-show使用!model.Order.Enabled，它计算为!null，Angular将其视为truthy，因此<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秒，而API仍在等待响应，然后它就消失了。这只是一个我必须在ng-show中添加更多逻辑的情况吗？

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>

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