Conditional statement inside html [duplicate]

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
– David, Commented Nov 20, 2017 at 14:20

Christian Santos · Accepted Answer · 2017-11-20 14:25:36Z

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:

answered Nov 20, 2017 at 14:20

Christian Santos

5,4551 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Syedur · Accepted Answer · 2017-11-20 14:57:27Z

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, 2017 at 14:57

Syedur

4244 silver badges11 bronze badges