Angular视图中的条件表达式：如果模型缺失怎么办？

Question

假设我在控制器范围内

$scope.user = {"username": "someUserName"};

如上所示，其中没有公司信息。

我想在视图中显示替代文本，如果缺少，则表示（伪代码）：

{{ if "user.company" does not exist show "not set" may be with a certain style }} 

是否有一种Angular方式可以优雅地管理它？

这样的事情会很棒：

{{ user.company || 'Not set!'.class('danger') }}

在上面的这种情况下，我可以找到}}并将其替换为|| 'Not set!'.class('danger') }}

我正在寻找一个通用的解决方案，例如：“如果缺少相应的模型，总是显示具有某种风格的特定文字”？

想象一下，您必须使用不同的模型值在100个不同视图中更正这些值。你能做什么？

Answer 1

您可以使用 ng-if / ng-show / ng-hide

喜欢这个

<div ng-if="!user.company">
   Not set
</div>

Answer 2

我觉得用表达式处理它会更优雅。

Company:  <div>{{user.company || 'Not Set'}}</div>

Answer 3

应使用ng-if / ng-show / ng-hide。

<div ng-if='!user.company'>Company not set</div>
<div ng-if='user.company'>{{user.company}}</div>

或

<div ng-hide='user.company'>Company not set</div>
<div ng-show='user.company'>{{user.company}}</div>

注意：

但是，如果您假装存在特定信息/不存在时更改样式，则可以使用ng-class。例如：

<div ng-class='{"no-company": !user.company}'>Company not set</div>

比在css中应用你的风格：

.no-company {
    background-color: red;
}

底线：

• 如果您想要显示文字，请使用ng-if或ng-show/ng-hide。
• 如果您想使用类更改样式或应用效果，请使用ng-class。
• 或者您可以混合角度指令以获得更复杂的结果。