Hello Friends, In this tutorial we are going to learn ng-change directive in Angular Js. Unlike onchange event of JavaScript ng-change directive evaluates the expression immediately whereas onchange event triggers at the of change when the input field loses its focus.

Introduction:

The ng-change directive specifies that what to do when any changes in the value of the HTML element occurs. ng-change directives evaluate the expression immediately whereas JavaScript onchange event triggers at the end of the change when input field loses its focus. ng-change directives need the ng-model directive to be present. ng-change event triggers only if actual changes in the input field occur not changes made from JavaScript.

ng-change

Syntax:

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

Parameter explanation:

expression: It specifies an expression that needs to evaluate when a change in the value of element occurs.

Example 1:

<!DOCTYPE html> 
<html> 
<head>
<title>
Angular Js Demo
</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script> 
 angular.module('myApp', []) 
 .controller('myCtrl', ['$scope', function($scope) { 
 $scope.count = 0; 
 $scope.Counter = function() { 
 $scope.count++; 
 }; 
 }]); 
</script> 
</head>
<body ng-app="myApp"> 
<div ng-controller="myCtrl"> 
 <p>Enter something in the input field:</p> 
 <input type="text" ng-change="Counter()" ng-model="myValue" /> 
 <p>The input field has changed {{count}} times.</p> 
</div>

</body> 
</html>

You can view the demo of the above application here.

Example 2:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Angular Js Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div class="container">
<div class="col-md-3 well" ng-init="count=0">
Courses: <select ng-change="ngChangeCount()" class="form-control" ng-model="course" ng-options="cr.course as cr.course for cr in courses"></select>
<pre> ({{course}}) ng-Change {{count}} </pre>
</div>
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myCtrl', ['$scope', function ($scope) {
$scope.course = "Angular";
$scope.courses = [{ course: ".NET" }, { course: "SQL Server" }, { course: "Angular Js" }];
$scope.ngChangeCount = function () {
$scope.count = $scope.count + 1;
}
}]);
</script>
</body>
</html>

You can view the demo of Example 2 here.

Hope you have understood what is ng-change directive in Angular Js and what is the difference between an onchange event of Javascript and ng-change directive in Angular Js.

View More:

Thank You.

54 Comments

  • Hey! Quick question that’s totally off topic. Do you know how to make your site mobile friendly? My weblog looks weird when viewing from my apple iphone. I’m trying to find a template or plugin that might be able to fix this problem. If you have any suggestions, please share. Many thanks!

  • Good day! I know this is kind of off topic but I was wondering which blog platform are you using for this site? I’m getting fed up of WordPress because I’ve had issues with hackers and I’m looking at alternatives for another platform. I would be great if you could point me in the direction of a good platform.

  • I do not even know how I ended up here, but I thought this post was good. I do not know who you are but definitely you are going to a famous blogger if you are not already 😉 Cheers!|

  • Thank you so much for giving everyone remarkably marvellous chance to read articles and blog posts from here. It is often very brilliant plus jam-packed with a great time for me personally and my office fellow workers to visit your web site at the least three times in one week to find out the new guides you have got. And of course, I’m certainly pleased concerning the superb hints served by you. Some 3 ideas in this post are indeed the most effective I’ve had.

  • Along with the whole thing which seems to be building inside this subject material, your viewpoints are quite exciting. Having said that, I appologize, but I do not give credence to your entire theory, all be it exhilarating none the less. It looks to us that your commentary are not entirely rationalized and in fact you are your self not totally certain of the point. In any case I did appreciate reading through it.

  • Fantastic goods from you, man. I have understand your stuff previous to and you’re just extremely fantastic. I actually like what you have acquired here, really like what you’re saying and the way in which you say it. You make it entertaining and you still care for to keep it sensible. I can’t wait to read much more from you. This is really a wonderful website.

  • Pretty nice post. I just stumbled upon your weblog and wished to say that I have truly enjoyed browsing your blog posts. In any case Iíll be subscribing to your rss feed and I hope you write again very soon!

  • When I initially commented I clicked the -Notify me when new comments are added- checkbox and now each time a comment is added I get 4 emails with the same comment. Is there any approach you can take away me from that service? Thanks!

  • Somebody essentially help to make seriously articles I would state. This is the first time I frequented your website page and thus far? I amazed with the research you made to create this particular publish extraordinary. Fantastic job!

  • Very nice post. I just stumbled upon your blog and wished to mention that I have truly enjoyed surfing around your weblog posts. In any case I’ll be subscribing for your feed and I hope you write once more very soon!

  • Very good written post. It will be valuable to everyone who utilizes it, including myself. Keep doing what you are doing – for sure i will check out more posts.

  • I do agree with all of the ideas you’ve presented in your post. They’re very convincing and will definitely work. Still, the posts are too short for novices. Could you please extend them a little from next time? Thanks for the post.

  • Great work! This is the kind of info that should be shared across the internet. Shame on the seek engines for now not positioning this publish upper! Come on over and discuss with my website . Thank you =)|

  • Greetings! This is my 1st comment here so I just wanted to give a quick shout out and say I genuinely enjoy reading your articles. Can you recommend any other blogs/websites/forums that deal with the same topics? Thank you so much!

  • I do not even know the way I finished up right here, but I thought this put up was once great. I don’t recognise who you are however definitely you are going to a well-known blogger if you happen to aren’t already 😉 Cheers!

  • After I initially commented I clicked the -Notify me when new comments are added- checkbox and now every time a comment is added I get four emails with the identical comment. Is there any method you’ll be able to remove me from that service? Thanks!

  • I have been absent for a while, but now I remember why I used to love this site. Thanks , I’ll try and check back more often. How frequently you update your web site?

  • I have taken notice that in digital camera models, extraordinary receptors help to target automatically. The particular sensors associated with some video cameras change in in the area of contrast, while others utilize a beam involving infra-red (IR) light, particularly in low lumination. Higher spec cameras from time to time use a blend of both programs and may have Face Priority AF where the video camera can ‘See’ some sort of face while focusing only on that. Thank you for sharing your thinking on this weblog.

  • Thanks for your article on this web site. From my own personal experience, there are times when softening way up a photograph could provide the photographer with a little an inspired flare. Sometimes however, the soft clouds isn’t exactly what you had as the primary goal and can quite often spoil an otherwise good snapshot, especially if you thinking about enlarging that.

  • I have taken notice that in cameras, exceptional detectors help to concentrate automatically. The particular sensors associated with some video cameras change in contrast, while others start using a beam with infra-red (IR) light, particularly in low lighting. Higher specs cameras occasionally use a mixture of both devices and will often have Face Priority AF where the dslr camera can ‘See’ any face and concentrate only on that. Thank you for sharing your opinions on this site.

  • Good day very cool blog!! Guy .. Excellent .. Amazing .. I will bookmark your web site and take the feeds additionally? I’m glad to search out a lot of helpful info right here within the put up, we’d like develop extra techniques on this regard, thanks for sharing. . . . . .|

  • Good day! I know this is kinda off topic but I was wondering if you knew where I could get a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having problems finding one? Thanks a lot!

  • Heya this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding experience so I wanted to get advice from someone with experience. Any help would be enormously appreciated!

  • Hey! This post could not be written any better! Reading through this post reminds me of my good old room mate! He always kept chatting about this. I will forward this write-up to him. Pretty sure he will have a good read. Many thanks for sharing!

  • Howdy fantastic website! Does running a blog such as this take a massive amount work? I have very little expertise in computer programming however I was hoping to start my own blog soon. Anyways, should you have any recommendations or techniques for new blog owners please share. I know this is off subject but I just had to ask. Thanks a lot!|

  • I was just searching for this information for some time. After 6 hours of continuous Googleing, at last I got it in your website. I wonder what’s the lack of Google strategy that don’t rank this type of informative web sites in top of the list. Normally the top web sites are full of garbage.

  • My brother recommended I would possibly like this web site. He was entirely right. This submit truly made my day. You cann’t imagine simply how a lot time I had spent for this info! Thanks!|

  • That is the right weblog for anyone who wants to find out about this topic. You realize so much its almost arduous to argue with you (not that I actually would need…HaHa). You definitely put a new spin on a topic thats been written about for years. Nice stuff, simply nice!

  • 66289 799645Hi there, just became aware of your weblog by means of Google, and found that its genuinely informative. Im gonna watch out for brussels. Ill be grateful in the event you continue this in future. Many individuals will probably be benefited from your writing. Cheers! 845047

  • A powerful share, I just given this onto a colleague who was doing a little analysis on this. And he actually bought me breakfast because I discovered it for him.. smile. So let me reword that: Thnx for the deal with! But yeah Thnkx for spending the time to debate this, I feel strongly about it and love studying extra on this topic. If potential, as you grow to be experience, would you thoughts updating your blog with extra details? It is highly useful for me. Huge thumb up for this blog post!

  • What i do not realize is actually how you are not actually a lot more well-preferred than you might be now. You’re so intelligent. You realize thus significantly relating to this subject, produced me in my view believe it from a lot of numerous angles. Its like women and men aren’t interested until it¡¦s one thing to do with Girl gaga! Your individual stuffs outstanding. At all times care for it up!

  • Simply wish to say your article is as astonishing. The clarity on your publish is just cool and i can think you’re a professional in this subject. Well with your permission allow me to grasp your RSS feed to keep updated with forthcoming post. Thank you a million and please carry on the gratifying work.

  • Wow, amazing blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your site is great, let alone the content!

  • I’d need to test with you here. Which is not one thing I often do! I get pleasure from studying a publish that may make folks think. Additionally, thanks for allowing me to comment!

  • It is perfect time to make a few plans for the future and it’s time to be happy. I’ve learn this put up and if I could I desire to suggest you few attention-grabbing issues or advice. Maybe you could write next articles referring to this article. I wish to learn more issues approximately it!

  • I would like to thnkx for the efforts you’ve put in writing this website. I’m hoping the same high-grade blog post from you in the upcoming also. Actually your creative writing skills has inspired me to get my own site now. Really the blogging is spreading its wings fast. Your write up is a good example of it.

  • What’s Happening i am new to this, I stumbled upon this I’ve discovered It positively useful and it has helped me out loads. I’m hoping to contribute & assist other customers like its aided me. Good job.