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') }}

我正在寻找类似的通用解决方案："Show always a certain text with a certain style, if the corresponding model is missing" ?

假设您必须在具有不同模型值的 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>

注：

但是，如果您在特定信息 exists/doesn 不存在的情况下假装更改样式，则可以使用 ng-class。示例：

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

比 css 应用您的样式：

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

底线：

Conditional Expressions in Angular's View: What if a model is missing?