web-dev-qa-db-ja.com

angularjsを使用して保存されていないデータを検出する

私はAngularJsの初心者なので、これは些細なことかもしれません。フォームに保存されていないデータを検出するための組み込みのAngularJs directiveがあります。そうでない場合は、どのように作成するのか。任意のポインタをいただければ幸いです。

htmlコードは

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

そして、my angular js controller code is

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

未保存のデータを検出するためのディレクティブを作成しようとしていますが、上記のコントローラーに書き込まれると推測しています。間違っている場合は修正してください。

javascriptangularjsangularjs-directive
44
iJade

AngularJSはCSSクラスを設定しますng-pristineおよびng-dirty ng-modelを使用した入力フィールドで、FormControllerにはプロパティ$pristineおよび$dirtyフォームが汚れているかどうかを確認できます。はい、可能です。

あなたがやろうとしていることを示すコードを提供してもらえますか？それはあなたを助けることをより簡単にするでしょう。

[〜＃〜] edit [〜＃〜]

以下は、初期状態/汚れた状態を検出する方法と、初期状態に戻す方法の簡単な例です。

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

_pristine/dirty_状態の監視は開始するのに適した場所ですが、ユーザーに最高の使いやすさを提供したい場合は、現在のフォームデータを初期フォームデータと比較して変更を検出する必要があります。 フォームが汚れていても、データが変更されたという意味ではありません。

この正確な問題を解決するために、非常に小さくて便利なモジュールを作成しました。これを使用すると、コントローラーコードを可能な限りシンプルに保つことができます。 modifiedプロパティをすべてのモデルとフォームコントローラーに自動的に追加し、提供されたreset()メソッドを呼び出すだけでフォーム全体をリセットできるため、変更を検出する代わりにアプリケーションのビジネスロジックに集中できます。手動で。

デモをご覧ください 。

配布パッケージとソースコードは、次の場所にあります。 https://github.com/betsol/angular-input-modified （Bower）

このライブラリの使用に関してサポートが必要な場合は、個人的にご連絡ください。喜んでお手伝いします。乾杯！

35
Slava Fomin II

これは私がコントローラーでやったことです。

変更用のフォームデータを取得すると、まず、次のようにその文字列表現をスコープ変数に保存します。

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

次に、状態変更リスナーを作成します。

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

次に、scope destroyのリスナーをクリアします。

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

お役に立てれば。

15
manukyanv07

UIルーターで動作するこのディレクティブを試してください

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

1
pdorgambide