在Angular JS中将HTML设置为未定义变量的默认值

Question

我有一个可能未设置的变量

{{salesperson || 'not set'}}

我想将CSS类添加到未设置区域，如此

{{salesperson || '<span class="error">- Not Set -</span>'}}

当我尝试它时会抛出语法错误。

Answer 1

表达式中的HTML由角度转义，以避免HTML / JS注入。

使用ng-class：

<span ng-class="{error: !salesperson}">{{salesperson || 'not set'}}</span>

或者只是ng-show / ng-hide：

<span ng-hide="salesperson" class="error">not set</span>
<span ng-show="salesperson">{{ salesperson }}</span>

Answer 2

因此，如果您确实想要注入HTML，请查看以下问题：With ng-bind-html-unsafe removed, how do I inject HTML?

但是，如果你只是想显示一个错误，如果没有定义：

{{salesperson}}<span ng-if="!salesperson" class="error ng-cloak">- Not Set -</span>'

如果salesperson未定义，则仅显示范围。确保定义ng-cloak css以防止任何闪烁。