Introduction:

In this article we will explain what is ng-change directive in angularJS or how to use ng-change directive in angularJS or why use ng-change directive in AngularJS or how to get the value of  textboxes, textarea, checkbox,select etc in AngularJS.

Description:

The angularJS ng-change directive, which is used with the input fields like textboxes, textarea, checkbox,select etc, evaluates the given expression as the value is changed by the user. The ng-change directive requires a ng-model directive to be present. The ng-change event is triggered at every change in the value. It will not wait until all changes are made, or when the input field loses focus.

Syntax:

<element ng-change="expression"></element>

let’s see a sample example of ng-change directive

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="NG.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script>
        var app = angular.module("app", []);
        app.controller("ChangeController", function ($scope) {
 
            $scope.CheckBoxChanged = function () {
                $scope.CheckBoxStatus =$scope.chkValue;
            };
 
            $scope.TextValueChanged = function () {
                $scope.TextBoxStatus =$scope.txtValue;
            };
 
            $scope.DropDownChnaged = function () {
                $scope.DropDownStatus =$scope.dropValue;
            };
 
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>Change Event</h1>
    <div ng-app="app" ng-controller="ChangeController">
    <input type="checkbox" name="chkstatus" ng-model="chkValue" ng-change="CheckBoxChanged()" />
    <p>Check box status:<b>  {{ CheckBoxStatus }}</b></p>  
    <input type="text" name="txtstatus" ng-model="txtValue" ng-change="TextValueChanged()" />
    <p>Text box Value: <b> {{ TextBoxStatus }}</b></p>
    <select name="ddlStatus" ng-model="dropValue" ng-change="DropDownChnaged()" style="width: 173px;">
        <option value="January">January</option>
        <option value="February">February</option>
           <option value="March">March</option>
        <option value="April">April</option>
           <option value="May">May</option>
        <option value="June">June</option>
           <option value="July">July</option>
        <option value="August">August</option>
           <option value="September">September</option>
        <option value="October">October</option>
           <option value="November">November</option>
        <option value="December">December</option>
    </select>
    <p>Dropdown Selected Value:<b> {{ DropDownStatus }}</b></p>
</div>
  
    </form>
</body>
</html>

 

Output:

 use of ng-change in angularjs

 


In above Example HTML block, for each input element (check box, text box and drop down), we have a ng-model directive that holds current value of the element. Notice the ng-change directive where we have specified the function name to execute.

 

When user changes the value of these elements (check box, text box and drop down), corresponding function executes and changes the value of the model and ultimately its value is set to the $scope properties that gets written on the page in the paragraph just below that element.

 

I hope it will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like