Angularjs if else statement

The infamous angularjs if else statement!!! When I started using Angularjs, I was a bit surprised that I couldn’t find an if/else statement.
I haven’t used much of knockoutjs but at least they had an if statement.

<!-- ko if: statement == "" -->  <!-- /ko -->

I turned to google and I didn’t find much on angularjs if else statement. However, mind you that I started using angularjs on a new project with a tight deadline so I didn’t have much time to fool around. Well now that it’s over, I decided to go over the documentation and try to find that statement.
The problem with angularjs is that the views are actually html and there’s no other server-side programming language injected inside.
Therefore there’s the if else statement is more a show hide statement.

In php, you would do something like this:

<?php if($statement): ?>
    <p>Show this line</p>
<?php else: ?>
    <p>Show this line instead</p>
<?php endif; ?>

Now using angular

<p ng-show="statement">Show this line</span>
<p ng-hide="statement">Show this line instead</span>

Careful
Remember that angularjs isn’t using a server-side programming language; therefore, you need to see the binding value in your controller.

$scope.statement = true;

Update

So I was working on a project and I noticed that when using the if/else statement, the condition shows while loading.
You can use ng-cloak to fix this.

<div class="ng-cloak">
<p ng-show="statement">Show this line</span>
<p ng-hide="statement">Show this line instead</span>
</div>

.ng-cloak { display: none }

Basically this tells angular to display once its ready

The post Angularjs if else statement appeared first on Coding Insight.