Conditional statement inside html

Question

I have this html snippet:

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

I want to show the icon and the text only when $ctrl.voltage is present (has at least on character).

Now, even without a string it shows the icon no matter what.

Any ideas to do this?

If this is AngularJS, are you just looking for something like the `ng-show` or `ng-hide` directive? — David, Nov 20 '17 at 14:20

Christian Santos · Accepted Answer · 2017-11-20T14:25:36.430

4

You are looking for ngIf:

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

The icon above will only render in the DOM if the ngIf expression evaluates to a "truthy" value.

If you still want the <i> to exist in the DOM but be hidden with CSS, you can use ngHide and ngShow like so:

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

For further reading:

edited Nov 20 '17 at 14:25

answered Nov 20 '17 at 14:20

Christian Santos

score 0 · Answer 2 · answered Nov 20 '17 at 14:57

0

I guess in your controller you have a property like:

$scope.voltage = "some text";

Then you can use:

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

Or:

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

answered Nov 20 '17 at 14:57

Syedur

2 Answers2