javascript - Detect unsaved data using angularjs

Question

Welcome To Ask or Share your Answers For Others

javascript - Detect unsaved data using angularjs

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

I'm a newbie to AngularJs, so this might be trivial. Are there any inbuilt AngularJs directive to detect unsaved data in a form. If not then how to go about writing one. Any pointers would be appreciated.

html code is

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

And my angular js controller code is

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

I am trying to write a directive to detect unsaved data, and I'm guessing its to be written in the above controller.Correct me if wrong.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

258 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T17:43:18+0000

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

Could you provide some code that shows what you're trying to do? That would make it easier to help you.

EDIT

Here's a simple example of how to detect a pristine/dirty state, and how to revert 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>

Categories

javascript - Detect unsaved data using angularjs

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags