Question

我试图理解为什么ng-if没有显示正确的内容。

<div ng-if="user.premium">
     <p>If user.premium is true show this content</p>
</div>
<div ng-if="!user.premium">
     <p>If user.premium is false show this content</p>
</div>

这似乎是我期望它发挥作用的方式。我在user.premium上做了一个console.log，它返回以下数据。

premium: false;

在这种情况下，我认为要显示的内容将是虚假内容。

在这种情况下，我希望只显示真实的内容。

premium: true;

然而，无论是真还是假，我都会在我的DOM中显示真实的内容。

如果属性为true或false，我将如何显示正确的内容。

Answer 1

尝试此解决方案..

确保“用户”，它是您控制器中的对象。喜欢这个..

$scope.user = {};
$scope.user.premium = false; //default value

如果您可以为“$ scope.user.premium”

分配任何值

$scope.user.premium = true; // Or any other value

肯定会起作用......

<div ng-if="user.premium">
    <p>If user.premium is true show this content</p>
</div>
<div ng-if="!user.premium">
     <p>If user.premium is false show this content</p>
</div>

Answer 2

有一些情况会导致此错误。我试着说两句：

您可能需要在填写错误后手动$apply对范围进行更改。当您在包装器中更改范围内的值时会发生这种情况，该包装器本身不会调用$ apply。
您可以使用变量范围，但在$rooScope或子范围内有一个具有相同名称的变量。

Answer 3

如果您使用As控制器（MainController作为mainCtrl）。你应该用像这样

<div ng-if="mainCtrl.user.premium">
     <p>If user.premium is true show this content</p>
</div>
<div ng-if="!mainCtrl.user.premium">
     <p>If user.premium is false show this content</p>
</div>

Answer 4

我是一个完整的plonker并且忘了将值添加到我的范围中。

答案是向我的控制器添加scope.user = user;。是没有美元，因为我们的设置是奇怪的。

为了正确设置，你应该使用美元。

如果值为true，则Angular ng-if不会隐藏

4 个答案: