web-dev-qa-db-fra.com

Détecter des données non sauvegardées en utilisant angularjs

Je suis un débutant chez AngularJs, donc cela pourrait être trivial. Existe-t-il des AngularJs directive incorporés pour détecter les données non sauvegardées dans un formulaire. Sinon, comment s'y prendre pour en écrire un? Tous les pointeurs seraient appréciés.

le code html est

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

Et mon angular js est le code

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

J'essaie d'écrire une directive pour détecter les données non sauvegardées, et je suppose qu'elle doit être écrite dans le contrôleur ci-dessus. Corrigez-moi si je me trompe.

javascriptangularjsangularjs-directive
44
iJade

AngularJS définit les classes CSS ng-pristine et ng-dirty sur tout champ de saisie sur lequel vous avez utilisé ng-model, et votre FormController a les propriétés $pristine et $dirty que vous pouvez vérifier pour voir si le formulaire est sale ou non. Alors oui, c'est possible.

Pourriez-vous fournir un code qui montre ce que vous essayez de faire? Cela rendrait plus facile de vous aider.

EDIT

Voici un exemple simple montrant comment détecter un état vierge/sale et comment revenir à un état vierge:

<!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
Anders Ekdahl

Surveiller l’état pristine/dirty Est un bon point de départ, mais si vous souhaitez fournir à l’utilisateur la meilleure convivialité possible, vous devrez comparer les données de formulaire actuelles avec les données de formulaire initiales pour détecter tout changement. Si le formulaire est sale, cela ne signifie toujours pas qu'il a changé de données.

J'ai créé un module très petit et utile pour résoudre ce problème précis. Avec cela, vous pouvez garder votre code de contrôleur aussi simple que possible. Il ajoute automatiquement la propriété modified à chaque modèle et même à chaque contrôleur de formulaire. Vous pouvez ainsi réinitialiser l'intégralité du formulaire en appelant simplement une méthode reset() fournie, de sorte que vous puissiez vous concentrer sur la logique métier de votre application plutôt que de détecter les modifications. manuellement.

S'il vous plaît voir la démo .

Vous pouvez trouver un package de distribution ainsi qu'un code source ici: https://github.com/betsol/angular-input-modified (il est également disponible via Bower =)

Si vous avez besoin d'aide pour utiliser cette bibliothèque, vous pouvez me contacter personnellement. Je serai heureux d'aider. À votre santé!

35
Slava Fomin II

C'est ce que j'ai fait dans mon contrôleur.

Lorsque j'obtiens les données de formulaire pour modification, j'enregistre d'abord sa représentation sous forme de chaîne dans une variable de portée telle que

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

Ensuite, je crée un auditeur de changement d'état:

 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
    }
});

Ensuite, j'efface l'auditeur sur scope destroy:

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

J'espère que cela t'aides.

15
manukyanv07

Essayez cette directive qui fonctionne avec ui-router

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

1
pdorgambide