ng-if

What is ng-if:

ng-if used to create a HTML element on particular condition . If condition is true then targeted HTML element will be created otherwise it will not be created.

Description of ng-if:

ng-if is a conditional directive .you can show/hide a HTML element with ng-show/ng-hide. but ng-if don't show/hide a element , it is created a Dom object on a given true condition. There is no ng-if-else in angularjs.

Syntax of ng-if:

<elementName ng-if="condition"></elementName>

    OR

    <div ng-if="condition"></div>

How to Use ng-if/ng-if Example:

AngularJs Example 1:

    <div>

        Angularjs Example of ng-if

        <br />

        <div ng-init="IsApply=true">

            <div ng-if="IsApply">

             This is angularjs example of ng-if with true condition.

            </div>

            <div ng-if="!IsApply">

             This is angularjs example of ng-if  with false condition.

             </div>

        </div>

    </div>

    o/p:   This is angularjs example of ng-if with true condition .

    AngularJs Example 2:

    <div ng-app="webapp">

        <div ng-controller="angularjsexampleCtlr">

            <div>

                Angularjs Example of ng-if

                <br />

                <div>

                    <div ng-if="IsApply">

                       This is angularjs example of ng-if with true condition.

                    </div>

                    <div ng-if="!IsApply">

                       This is angularjs example of ng-if  with false condition.

                    </div>

                </div>>

            </div>

        </div>

    </div>

    <script>

        angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {

            $scoep.IsApply = true;

        });

    </script>

    o/p:   This is angularjs example of ng-if with true condition .

ng-model