Angularjs自动保存输入

我想在上次更改5秒后自动保存我的文本区域控件，并显示脏标志状态。Angularjs自动保存输入

所以，当我开始输入脏标志应该是真实的，如果我停止输入5秒，我应该发送最新值到后端代码并将脏标志更改为false。我知道ng-model-option和debounce选项。对我来说这是一个很好的解决方案，但不会改变脏标志。在5秒超时后触发ng-change而不是在更改开始时。对于我来说，一个完美的解决方案是在ng-change之内延迟（去抖），这样才能捕捉到更改状态。

任何想法我可以如何处理？

来源

2016-08-25 mhd

所以，你正在寻找两个事件是否正确？发生变化时立即发生的事件，以及最后一次更改后的另一个5秒钟？ –

@IthinkIcancode是 – mhd

我试图创造一个指令，可以帮助你。请检查下面的代码。

angular.module('myApp', []).controller('myController', ['$scope', 
 
    function($scope) { 
 
     $scope.myModel = 'Model'; 
 
    } 
 
    ]) 
 
    .directive('delayBind', ['$timeout', 
 
    function($timeout) { 
 
     return { 
 
     scope: { 
 
      ngModel: "=" 
 
     }, 
 
     restrict: "A", 
 
     require: 'ngModel', 
 
     link: function(scope, element, attrs, ctrl) { 
 
      scope.timeout; 
 
      var parser = function(value,oldValue) { 
 
      scope.value=value; 
 
      if (scope.timeout) { 
 
       $timeout.cancel(timeout); 
 
      } 
 
      timeout = $timeout(function() { 
 
       scope.ngModel=scope.value; 
 
       ctrl.$setPristine(); 
 
       scope.$apply(); 
 
      }, 5000); 
 
      return ctrl.$modelValue; 
 
      } 
 
      ctrl.$parsers.push(parser); 
 
     } 
 
     } 
 
    } 
 
    ])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app='myApp'> 
 
    <div ng-controller='myController'> 
 
    <form name='MyForm'> 
 
    {{myModel}} 
 
    <br/> 
 
    <input name='MyModel' type="text" delay-bind ng-model="myModel" /> 
 
     <br> 
 
     {{MyForm.MyModel.$dirty}} 
 
    </form> 
 
    </div> 
 
</div>

来源

2016-08-25 05:10:36

还有一件事。我想在ng-repeat中使用输入。所以我试过这段代码，我得到了错误超时未定义。任何建议？ – mhd

我相信这应该工作，即使用在ng-repeat中。请检查您是否正确注入$ timeout –

你可以做到的一种方法是同时使用ngChange和$ timeout。基本上，你会使用ngChange进行即时状态更改，然后在更改函数内部创建一个$ timeout函数，该函数在最后一次更改后再运行5秒。

它可能是这个样子：

myApp.controller('MyCtrl', function($scope, $timeout){ 

var timeout; 
$scope.instant = false; 
$scope.delayed = false; 

//INSTANT & DELAY Function 
$scope.change = function(){  
    $scope.instant = true; 

    if(timeout) { 
     $timeout.cancel(timeout); 
    } 
    timeout = $timeout(function(){ 
     $scope.delayed = true; 
    }, 5000); 

});

你会再在ngChange指令调用change()。

这里是一个工作JSFiddle

来源

2016-08-25 03:07:07

Angularjs自动保存输入

回答

相关问题