45

我是 AngularJs 的新手,所以这可能是微不足道的。是否有任何内置的 AngularJsdirective来检测表单中未保存的数据。如果没有,那么如何去写一个。任何指针将不胜感激。

html代码是

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

我的角度js控制器代码是

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

我正在尝试编写一个指令来检测未保存的数据,我猜它应该写在上面的控制器中。如果有错误,请纠正我。

4

4 回答 4

76

AngularJS 设置 CSS 类ng-pristineng-dirty您使用过 ng-model 的任何输入字段,并且您的 FormController 具有属性$pristine$dirty您可以检查这些属性以查看表单是否脏。所以是的,这是可能的。

您能否提供一些代码来显示您正在尝试做什么?这样会更容易帮助你。

编辑

这是一个如何检测原始/脏状态以及如何恢复到原始状态的简单示例:

<!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>
于 2013-02-13T09:33:20.590 回答
35

监控pristine/dirty状态是一个很好的起点,但如果你想为用户提供尽可能好的可用性,你必须将当前表单数据与初始表单数据进行比较以检测任何变化。如果表单是脏的,它仍然不意味着它已经改变了数据。

我创建了一个非常小且有用的模块来解决这个确切的问题。有了它,您可以使控制器代码尽可能简单。它会modified自动为每个模型甚至表单控制器添加属性,您只需调用提供的reset()方法即可重置整个表单,因此您可以专注于应用程序的业务逻辑,而不是手动检测更改。

请看演示

您可以在此处找到分发包和源代码: https ://github.com/betsol/angular-input-modified (也可以通过Bower获得)

如果您在使用此库时需要任何帮助 - 您可以亲自与我联系。我很乐意提供帮助。干杯!

于 2014-10-13T11:15:39.090 回答
16

这就是我在控制器中所做的。

当我获取要修改的表单数据时,首先我将其字符串表示形式保存到一个范围变量中,如下所示:

$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.$on('$destroy', function () {
    window.onbeforeunload = null;
    $locationChangeStartUnbind();
});

希望这可以帮助。

于 2015-04-20T16:58:50.030 回答
1

试试这个适用于 ui-router 的指令

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

于 2014-04-15T19:03:58.233 回答