Thursday, 22 October 2015

ng-change

What is ng-change: ng-change used to perform any angularjs task on change of input of any input type ,select .

Description of ng-change: ng-change fired when any input type has updated its value. It is used with all input type(text,radio,check) ,select.

Syntax of ng-change:
<elementname  ng-change="myfun()"></elementname>
    OR

    <input ng-change="myfun()"/>

How to Use ng-change/ng-change Example:
AngularJs Example 1:

    <div ng-app="webapp">
        <div ng-controller="angularjsexampleCtlr">
            <div>
                Angularjs Example of ng-change
                <br />
                <div ng-init="myexpression='Angularjs Example of ng-change'">
                    Before ng-change fired : {{myexpression}}
                    <input type="text" ng-change="myfun()" />
                    After ng-change fired :{{myexpression}}
                </div>
            </div>
        </div>
    </div>
    <script>
        angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {
            $scope.myfun = function () {
                $scoep.myexpression = 'This is angularjs example of ng-change after input any diffrent value';
            }
        });
    </script>

    o/p:    Before ng-change fired: Angularjs Example of ng-change.
            After ng-change fired :This is angularjs example of ng-change after input any diffrent value .
    AngularJs Example 2:

    <div ng-app="webapp">
        <div ng-controller="angularjsexampleCtlr">
            <div>
                Angularjs Example of ng-change
                <br />
                <div ng-init="myexpression='Angularjs Example of ng-change'">
                    <select  ng-change="myfun()" >
                        <option value="0">Select</option>
                        <option value="1">India</option>
                        <option value="2">America</option>
                        <option value="2">Russia</option>
                    </select>
                    <div >
                        Before ng-change fired:  {{myexpression}}
                        After ng-change fired: {{myexpression}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {
            $scope.myfun = function () {
                $scoep.myexpression = 'This is angularjs example of ng-change after select any diffrent value';
            }
        });
    </script>

    o/p:    Before ng-change fired: Angularjs Example of ng-change .
            This is angularjs example of ng-change after select any different value.

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-non-bindable

What is ng-non-bindable: ng-non-bindable used when we don't want any angularjs expression .

Description of ng-non-bindable: ng-non-bindable render a angularjs expression as it. There is no rendering for Angularjs expression where we mentioned this directive. It is show the raw angularjs code after rendering. It is useful when we want a angularjs expression display its self.

Syntax of ng-non-bindable:
<elementname ng-non-bindable>{{myexpression}}</elementname>
    OR
    <div ng-non-bindable>{{myexpression}}</div

How to Use ng-non-bindable/ng-non-bindable Example:

AngularJs Example :
    <div>
        Angularjs Example of ng-non-bindable
        <br />
        <div ng-init="myexpression='This is angularjs example of ng-non-bindable'">
            <div>{{myexpression}}</div>
            <div ng-non-bindable>{{myexpression}}</div>
        </div>
    </div>
    o/p:   Angularjs Example of ng-non-bindable
           {{myexpression}}

Wednesday, 21 October 2015

ng-class

What is ng-class: ng-class used to add a class in HTML element on a particular condition .

Description of ng-class: On rendering if a given condition is true then this class will be added on that element where this ng-class directive placed. it is very useful to adding a class .you can add more than on class on different condition too.

Syntax of ng-class:


<div ng-class="{'classname':condition}"></div>

How to Use ng-class/ng-class Example:
<style>
    .mybackgroundcolor {
        background-color: yellow;
    }

</style>
 AngularJs Example 1:
<div>
    Angularjs Example of ng-class
    <br />
    <div ng-init="IsClassApply=true" ng-class="{'mybackgroundcolor':IsClassApply}">
        This is angularjs example of ng-class
    </div>
</div>
  o/p:   Angularjs Example of ng-class
           This is angularjs example of ng-class


 AngularJs Example 2:  

<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr">
        <div>
            Angularjs Example of ng-class
            <br />
            <div ng-class="{'mybackgroundcolor':IsClassApply}">
                This is angularjs example of ng-class
            </div>
        </div> 
    </div>
</div>
    <script>
        angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {
            $scoep.IsClassApply = true;
        });
    </script>

      o/p: Angularjs Example of ng-class
            This is angularjs example of ng-class