Angularjs debounce正在清除我的无线电输入

时间:2015-07-06 19:42:01

标签: javascript angularjs angular-ngmodel debouncing

我有以下单选按钮组:

<input type="radio" name="GROUP" ng-model="data1" id="for1" value="value" ng-change="formSubmit()" ng-model-options="{debounce: 3000}">
<input type="radio" name="GROUP" ng-model="data2" id="for2" value="value" ng-change="formSubmit()" ng-model-options="{debounce: 3000}">

正如您所看到的,在ng-click上,我让它运行一个特定的功能,但只有debounce才会发生超时3秒。

当我ng-model-options="{debounce: 3000}"出现时,我的广播组经常会取消选中 - 这意味着组中的任何输入都不会被检查。

当我删除去抖动时,不会发生此问题。

有谁知道如何解决这个问题?

2 个答案:

答案 0 :(得分:0)

根据上面的评论帖子,假设你想保持第一次点击并在3秒延迟内忽略后续点击,我建议:

<input type="radio" ng-change="doItLater();" value="X">

(同时,在指令中:

scope.doItLater = function() {
    if (scope.timeoutwatcher !== undefined) {return;}
    scope.timeoutwatcher = $timeout(function() {
        // do it
        delete scope.timeoutwatcher;
    },3000);
}

或者,如果您希望稍后在超时期限内点击覆盖之前的点击,

scope.doItLater = function() {
    $timeout.cancel(scope.timeoutwatcher);
    scope.timeoutwatcher = $timeout(function() {
        // do it
    },3000);
}

答案 1 :(得分:0)

这样的事情可能会有所帮助

angular
    .module('app', [])
    .controller('example', ['$scope', function($scope) {
        $scope.user = {};
        $scope.$watch('user.gender', $scope.callback);
        $scope.callback = function() {
            alert($scope.user);
        }
    }]);

并在html中如此

  <form ng-app="app" ng-controller="example">
    <input name="jim" type="radio" ng-model="user.gender" value="male" ng-model-options="{debounce: 3000}" />male
    <input name="jim" type="radio" ng-model="user.gender" value="female" ng-model-options="{debounce: 3000}" />female
    <br />
  <pre>form = {{user | json}}</pre>