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 .

No comments :

Post a comment