Best IT Recipes

Detecting unsaved data using angular

I am new to AngularJs, so this may be trivial. Is there a built-in AngularJs directive for detecting unsaved data in a form. If not, then how to do it. Any pointers would be appreciated.

html code

 <input type="text" runat="server" />

And my angular js controller code

  function MyCtrl1($scope) { // code to do stuff }MyCtrl1.$inject = ['$scope'];

I am trying to write a directive to detect unsaved data, and I assume that it will be written in the above controller. Correct me if it is wrong.

+44
javascript angularjs angularjs-directive
Feb 13 '13 at 9:05
source share
4 answers

AngularJS sets the CSS classes ng-pristine and ng-dirty in any input field that you used ng-model on, and your FormController has the $pristine and $dirty properties that you can check to see if it's dirty or not. So yes, maybe.

Could you provide a code that shows what you are trying to do? That would make it easier for you.

EDIT

Here is a simple example of how to detect a virgin / dirty state and how to return to a pristine state:

 <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> <script type="text/javascript"> function Ctrl($scope) { var initial = {text: 'initial value'}; $scope.myModel = angular.copy(initial); $scope.revert = function() { $scope.myModel = angular.copy(initial); $scope.myForm.$setPristine(); } } </script> </head> <body> <form name="myForm" ng-controller="Ctrl"> myModel.text: <input name="input" ng-model="myModel.text"> <p>myModel.text = {{myModel.text}}</p> <p>$pristine = {{myForm.$pristine}}</p> <p>$dirty = {{myForm.$dirty}}</p> <button ng-click="revert()">Set pristine</button> </form> </body> </html>
+76
Feb 13 '13 at 9:33
source share

Monitoring pristine/dirty Status is a good place to run, but if you want to provide the user with the greatest possible usability, you will need to compare the current form data with the initial form data to detect any changes. If the form is dirty, it still does not mean that it has changed the data.

I created a very small and useful module to solve this exact problem. With it, you can save your controller code as easily as possible. It adds a modified property for each model and even automatically forms a controller, and you can reset the entire form by simply calling the provided reset() method so that you can focus on the business logic of the application, rather than manually detecting changes.

Please see the demo .

Here you can find the distribution, as well as the source code: https://github.com/betsol/angular-input-modified (it is also available through Bower)

If you need help using this library, you can contact me personally. I will be happy to help. Hurrah!

+35
Oct 13 '14 at 11:15
source share

This is what I did in my controller.

When I get the form data for modification, first I save its string representation in a variable scope as follows:

 $scope.originalData = JSON.stringify($scope.data);

Then I create a state change listener:

  var $locationChangeStartUnbind = $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { if ($scope.originalData !== JSON.stringify($scope.data)) { //Show alert and prevent state change } else { //DO NOTHING THERE IS NO CHANGES IN THE FORM } });

Then I clear the listener from the area of ​​destruction:

 $scope.$on('$destroy', function () { window.onbeforeunload = null; $locationChangeStartUnbind(); });

Hope this helps.

+14
Apr 20 '15 at 16:58
source share

Try this directive that works with ui-router

https://github.com/facultymatt/angular-unsavedChanges

+1
Apr 15 '14 at 19:03
source share


More articles:


All Articles