What is Ng-change in Angular JS and how do assign value to it?

In this article, we discuss What is Ng-change in Angular JS and how do assign value to it?

Hi, let’s learn about an interesting directive provided in AngularJS, i.e. ng-change directive, the name itself partially gives away the work that it performs. Programmers usually get confused between on-change and ng-change events.

What is Ng-change in Angular JS and how do assign value to it?

What is Ng-change in Angular JS and how do assign value to it?

The topics we will take up today will be:

  • What is a directive?
  • What is ng-change?
  • Important points while using ng-change directive
  • Syntax
  • Example

Before proceeding with the blog, we will first have a quick look at what Directives are in AngularJS.

What is a directive?

AngularJS directives are simply extended HTML attributes with the prefix ‘ng-‘. AngularJS provides a set of built-in directives which offer various functionalities to our applications.

AngularJS also lets us define our own directives.

What is ng-change?

Ng-change is a directive in AngularJS which is meant for performing operations when a component value or event is changed. In other words, the ng-change directive tells AngularJS what to do when the value of an HTML element changes.

An ng-model directive is required by the ng-change directive.

Important points while using ng-change directive:

  • What happens to onChange event? The ng-change directive from AngularJS does not override the element’s original onchange event, both the ng-change expression and the original onchange events will be executed.
  • The ng-change event gets triggered at every change in the value. It will not wait for all the changes to be made, or for the input field to lose focus.
  • The ng-change event is only triggered if there is an actual change in the input value, and not if the change was made from a JavaScript.
  • This ng-change directive is supported by the HTML tags like <input>, <select>, and <textarea>.
  • The ngChange expression is evaluated only when a change in the input value causes a new value to be committed to the model.

It will not be evaluated:

  1. if the value returned from the $parsers transformation pipeline has not changed
  2. if the input continued to be invalid, since the model will stay null
  3. if the model is changed not by an input value but programmatically.

Note, this directive requires ngModel to be present.

Syntax:

<element ng-change=“expression”></element>  

expression: It specifies an expression that is executed when value of an element changes.

Example:

<!DOCTYPE html>  
<html>  
<script src="<a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js</a>"></script>  
<body ng-app="App1">  
<div ng-controller="Cng1">  
  <p>Please type in the input field:</p>  
  <input type="text" ng-change="myFunc()" ng-model="Val" />  
  <p>The input field has changed {{count}} times.</p>  
</div>  
   
<script>  
  angular.module('App1', [])  
    .controller('cng1l', ['$scope', function($scope) {  
      $scope.count = 0;  
      $scope.myFunc = function() {  
        $scope.count++;  
      };  
    }]);  
</script>  
</body>  
</html> 

Output (After 3 changes)

Please type in the input field:

The input field has changed 3 times.

Also Check out Angular Data Binding and How to Implement it?

Model Simran Kaur Hot Photos

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *