Introduction
This article explains "ngDirty" in AngularJS.
ng-dirty in AngularJs helps to determine whether or not any changes have been made by the user at run time. If you are making changes from the code section then it's Ok for ng-dirty and it will not provide any type of error but if you are making changes at run time then it will show an error or display the text according to the CSS defined in the ng-dirty class.
ng-dirty is defined in the CSS as a class, then it is applied to the design section.
Now I will create a simple application and will show how you can use ng-dirty in your application.
Step 1
First of all you need to add an external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link to download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application.
- <head runat="server">
- <title></title>
- <script src="angular.min.js"></script>
- </head>
Step 2
Now after adding the External JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
- <html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will work on the JavaScript section for this application.
Write this code in the head section:
- <script>
- var mod = angular.module('mod', []);
- function x($scope) {
- $scope.autoChangeValue = 1;
- setTimeout(function () {
- $scope.autoChangeValue = 5;
- $scope.$apply();
- }, 1000);
- }
- </script>
Here I create a variable in which angular.module is defined.
After this a function named "x" is created, in the function a variable is used whose value is set to "1" but in the second or in the child function it's value is set to "5". So, two values are defined for the same variable but in two different functions.
Wherever these value will be bound, these values will be change after 1000 ms.
Step 3
Now I will work on the Body section, so write this code in the body:
Vijay VJPosted Aug 17, 2018, 12:53 AM
Ng-dirty class is not added when we change the input value programatically