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

【问题标题】：Angularjs debounce is clearing my radio inputAngularjs debounce 正在清除我的无线电输入
【发布时间】：2015-09-24 02:21:32
【问题描述】：

我有以下单选按钮组：

<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}" 在场时，我的无线电组通常会取消选中 - 这意味着不会检查组中的任何输入。

当我移除去抖动时，这个问题不会发生。

有谁知道我该如何解决这个问题？

【问题讨论】：

你有没有 jsfiddle 来演示一下。
@rikAtee plnkr.co/edit/0OovzU9mMDtbgLfYWYYc
我试过这个：embed.plnkr.co/xJlhU2fpLLtxdQFlBMhH 当我尝试从一个选项切换到另一个选项时，我似乎选择了两个单选按钮，直到发生去抖动，然后切换（去抖动期间的任何点击都是忽略。）这在技术上似乎是正确的，而且用户体验很差；也许这里最简单的答案是“不要去抖动单击表单元素，因为这样做没有好处”？
@danielbeck 我想在编辑输入时调用一个函数，但超时时间为 3 秒。除了去抖动之外，我似乎想不出任何其他方法来做到这一点。有什么建议吗？

标签： javascript angularjs angular-ngmodel debouncing

【解决方案1】：

根据上面的评论线程，假设您想在 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);
}

【讨论】：

我得到的第二个，Error: Can't find variable: $timeout
你需要注入 $timeout 作为依赖。 docs.angularjs.org/api/ng/service/$timeout

【解决方案2】：

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

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>

【讨论】：