html中的条件语句

Question

我有这个html片段：

<div class="principal-page">
    <p class="main-chart" 
        ...
        <i class="fa fa-bolt"></i> {{$ctrl.voltage}}
    </p>
</div>

我想仅在$ctrl.voltage存在时显示图标和文字（至少在字符上）。

现在，即使没有字符串，它也会显示图标，无论如何。

有任何想法吗？

Answer 1

您正在寻找ngIf：

<i ng-if="$ctrl.voltage"></i>

如果ngIf表达式评估为＆＃34; truthy＆＃34;上面的图标将仅在DOM中呈现。值。

如果您仍希望<i>存在于DOM中但是仍然使用CSS隐藏，则可以使用ngHide和ngShow，如下所示：

<i ng-hide="!$ctrl.voltage"></i>
<i ng-show="$ctrl.voltage"></i>

进一步阅读：

• ngIf
• ngHide
• ngShow

Answer 2

我想在你的控制器中你有一个属性：

$ scope.voltage =“some text”;

然后你可以使用：

<i ng-if="voltage.length > 0"></i>

或者：

<i ng-show="voltage.length > 0"></i>