Question

我正在使用angularjs开发一个应用程序，它在屏幕上显示一些带有数字数据的文本字段。他们看起来很像这样：

<input type="text" ng-model="value" ng-change="controller.functions.valueChanged(value)">

问题是我每次写一个数字或从textfield中删除一个数字，ng-change指令调用该函数。是否可以将一些延迟之王应用于ng-change函数？

Answer 1

您可以使用ngModelOptions

去抖动：包含去抖模型更新值的整数值（以毫秒为单位）。值为0会触发立即更新。

代码的

 <input type="text" ng-model-options="{ debounce: 1000 }" ng-model="value" ng-change="controller.functions.valueChanged(value)">

Answer 2

<强>更新

您可以使用$ timeout服务来创建延迟功能。这可以应用于其他指令回调

＆＃13;

angular.module('myApp', []);
angular.module('myApp')
  .controller('myCtrl', ["$scope", "$log", "$timeout",
    function($scope, $log, $timeout) {

      $scope.delay = (function() {
        var promise = null;
        return function(callback, ms) {
          $timeout.cancel(promise); //clearTimeout(timer);
          promise = $timeout(callback, ms); //timer = setTimeout(callback, ms);
        };
      })();

      $scope.doSomeThing = function(value) {
        var current = new Date();
        $scope.result = 'value:' + $scope.foo + ', last updated:' + current;
      };

    }
  ]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <h3>$timeout delay demo</h3>
  <div>
    <input ng-model="foo" ng-change="delay(doSomeThing, 1000)" type="text" />
  </div>
  <div>Result: {{result}}</div>
</div>

＆＃13;

Answer 3

最简单的方法是在controller.functions.valueChanged函数中设置超时。

Angularjs有ngModelOptions指令，这对这类事情非常有用。您可以尝试设置

ng-model-options="{ debounce: 1000 }"

表示模型更改前的超时时间。您也可以使用

ng-model-options="{ updateOn: 'blur' }"

仅在焦点离开元素时才更新模型。

Answer 4

我正在使用AngularJs 1.2.x并偶然发现每次更改触发的ng-change问题。可以使用ng-blur，但即使值没有变化也会触发。所以两者都无法有效使用。

使用Angularjs 1.3.x，使用ng-model-options（例如下面的

）可以更轻松地完成任务

调用更改功能＆＃34; onBlur＆＃34;

ng-change="ctrl.onchange()" ng-model-options="{updateOn: 'blur'}"

并且

延迟调用变更函数500毫秒

ng-change="ctrl.onchange()" ng-model-options='{ debounce: 500 }'"

现在回到使用AngularJs 1.2.x获取此类内容的问题

调用更改功能＆＃34; onBlur＆＃34;

<强> HTML

<input type="text" ng-model="ctrl.a.c" sd-change-on-blur="ctrl.onchange()" /> 或

<input type="text" ng-model="ctrl.a.c" sd-change-on-blur="ctrl.onchange(ctrl.a.c)" />

JS

app.directive('sdChangeOnBlur', function() {
  return {
    restrict: 'A',
    scope: {
      sdChangeOnBlur: '&'
    },
    link: function(scope, elm, attrs) {
      if (attrs.type === 'radio' || attrs.type === 'checkbox')
        return;

      var parameters = getParameters(attrs.sdChangeOnBlur);

      var oldValue = null;
      elm.bind('focus', function() {
        scope.$apply(function() {
          oldValue = elm.val();
        });
      })

      elm.bind('blur', function() {
        scope.$apply(function() {
          if (elm.val() != oldValue) {
            var params = {};
            if (parameters && parameters.length > 0) {
              for (var n = 0; n < parameters.length; n++) {
                params[parameters[n]] = scope.$parent.$eval(parameters[n]);
              }
            } else {
              params = null;
            }

            if (params == null) {
              scope.sdChangeOnBlur();
            } else {
              scope.sdChangeOnBlur(params)
            }
          }
        });
      });
    }
  };
});

function getParameters(functionStr) {
  var paramStr = functionStr.slice(functionStr.indexOf('(') + 1, functionStr.indexOf(')'));
  var params;
  if (paramStr) {
    params = paramStr.split(",");
  }
  var paramsT = [];
  for (var n = 0; params && n < params.length; n++) {
    paramsT.push(params[n].trim());
  }
  return paramsT;
}

延迟调用变更函数500毫秒

<强> HTML

<input type="text" ng-model="name" sd-change="onChange(name)" sd-change-delay="300"/>

OR

<input type="text" ng-model="name" sd-change="onChange()" sd-change-delay="300"/>

<强> JS

app.directive('sdChange', ['$timeout',
  function($timeout) {
    return {
      restrict: 'A',
      scope: {
        sdChange: '&',
        sdChangeDelay: '@' //optional
      },
      link: function(scope, elm, attr) {
        if (attr.type === 'radio' || attr.type === 'checkbox') {
          return;
        }

        if (!scope.sdChangeDelay) {
          scope.sdChangeDelay = 500; //defauld delay
        }

        var parameters = getParameters(attr.sdChange);

        var delayTimer;
        elm.bind('keydown keypress', function() {
          if (delayTimer !== null) {
            $timeout.cancel(delayTimer);
          }

          delayTimer = $timeout(function() {
            var params = {};
            if (parameters && parameters.length > 0) {
              for (var n = 0; n < parameters.length; n++) {
                params[parameters[n]] = scope.$parent.$eval(parameters[n]);
              }
            } else {
              params = null;
            }

            if (params == null) {
              scope.sdChange();
            } else {
              scope.sdChange(params)
            }
            delayTimer = null;
          }, scope.sdChangeDelay);

          scope.$on(
            "$destroy",
            function(event) {
              $timeout.cancel(delayTimer);
              console.log("Destroyed");
            }
          );
        });
      }
    };
  }
]);

function getParameters(functionStr) {
  var paramStr = functionStr.slice(functionStr.indexOf('(') + 1, functionStr.indexOf(')'));
  var params;
  if (paramStr) {
    params = paramStr.split(",");
  }
  var paramsT = [];
  for (var n = 0; params && n < params.length; n++) {
    paramsT.push(params[n].trim());
  }
  return paramsT;
}

两种方法的关键是

http://plnkr.co/edit/r5t0KwMtNeOhgnaidKhS?p=preview

http://plnkr.co/edit/9PGbYGCDCtB52G8bJkjx?p=info

ng-change delay，angularjs

4 个答案: