wake-up-neo.com

Ermitteln Sie ungespeicherte Daten mithilfe von AngularJS

Ich bin ein Neuling bei AngularJs, das könnte also trivial sein. Gibt es eingebaute AngularJs directive, um nicht gespeicherte Daten in einem Formular zu erkennen. Wenn nicht, wie soll man dann einen schreiben? Alle Hinweise wäre dankbar.

hTML-Code ist

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

Und mein angular js Controller-Code ist

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

Ich versuche, eine Direktive zu schreiben, um nicht gespeicherte Daten zu erkennen, und ich vermute, dass diese in den obigen Controller geschrieben werden. Korrigieren Sie mich, wenn Sie falsch liegen.

44
iJade

AngularJS setzt die CSS-Klassen ng-pristine und ng-dirty in jedem Eingabefeld, für das Sie ng-model verwendet haben, und Ihr FormController hat die Eigenschaften $pristine und $dirty, mit dem Sie überprüfen können, ob das Formular verschmutzt ist. Also ja, es ist möglich.

Können Sie Code bereitstellen, der zeigt, was Sie tun möchten? Das würde es einfacher machen, Ihnen zu helfen.

EDIT

Hier ist ein einfaches Beispiel, wie ein unberührter/verschmutzter Zustand erkannt wird und wie ein unberührter Zustand wiederhergestellt wird:

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

Das Überwachen des Status pristine/dirty Ist ein guter Ausgangspunkt. Wenn Sie dem Benutzer jedoch die bestmögliche Benutzerfreundlichkeit bieten möchten, müssen Sie die aktuellen Formulardaten mit den ursprünglichen Formulardaten vergleichen, um Änderungen zu erkennen. Wenn das Formular verschmutzt ist, bedeutet dies nicht, dass es Daten geändert hat.

Ich habe ein sehr kleines und nützliches Modul erstellt, um genau dieses Problem zu lösen. Damit können Sie Ihren Controller-Code so einfach wie möglich halten. Es fügt jedem Modell und sogar jedem Formular-Controller automatisch die Eigenschaft modified hinzu, und Sie können das gesamte Formular zurücksetzen, indem Sie einfach eine bereitgestellte reset() -Methode aufrufen, sodass Sie sich auf die Geschäftslogik Ihrer Anwendung konzentrieren können, anstatt Änderungen zu erkennen manuell.

Bitte siehe Demo .

Ein Distributionspaket sowie einen Quellcode finden Sie hier: https://github.com/betsol/angular-input-modified (ebenfalls über Bower =)

Wenn Sie Hilfe bei der Nutzung dieser Bibliothek benötigen, können Sie mich persönlich kontaktieren. Ich helfe gerne weiter Prost!

35
Slava Fomin II

Das habe ich in meinem Controller gemacht.

Wenn ich die Formulardaten zur Änderung erhalte, speichere ich zuerst die Zeichenfolgendarstellung in einer Bereichsvariablen wie der folgenden:

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

Dann erstelle ich einen Statusänderungs-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
    }
});

Dann lösche ich den Listener auf Scope Destroy:

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

Hoffe das hilft.

15
manukyanv07

Versuchen Sie diese Anweisung, die mit UI-Router funktioniert

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

1
pdorgambide