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 .
            After ng-change fired:This is angularjs example of ng-change after select any different value.

No comments :

Post a Comment