启用角度去抖后,单选按钮的变化很慢

时间:2015-08-19 14:44:42

标签: javascript angularjs forms radio-button

当我开启去抖时,单选按钮切换速度很慢。半秒钟我看到两个按钮都启用,然后旧按钮清除。它工作正常,但在视觉上它很烦人。

注意:我找到了答案,我只是发布此内容供其他人学习。

这是我的代码

<!doctype html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
   </head>
   <body ng-app="formExample">
    <div ng-controller="ExampleController">
      <form novalidate ng-model-options="{ debounce: { default: 500 } }">
          <input type="radio" ng-model="formdata.t1" value="yes" />
          <input type="radio" ng-model="formdata.t1" value="no" />
          <input type="radio" ng-model="formdata.t1" value="na" />
      <input type="button" ng-click="reset()" value="Reset" />
      <input type="submit" ng-click="update(formdata)" value="Save" />
    </form>
    <pre>form = {{formdata | json}}</pre>
    <pre>master = {{master | json}}</pre>
    <script>
      angular.module('formExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.master = {};

          $scope.update = function(formdata) {
            $scope.master = angular.copy(formdata);
          };

          $scope.reset = function() {
            $scope.formdata = angular.copy($scope.master);
          };

          $scope.reset();
        }]);
    </script>
   </body>
</html>

1 个答案:

答案 0 :(得分:0)

问题是我忘了在单选按钮集上添加名称属性。这解决了这个问题。

          <input type="radio" ng-model="formdata.t1" name="t1" value="yes" />
          <input type="radio" ng-model="formdata.t1" name="t1" value="no" />
          <input type="radio" ng-model="formdata.t1" name="t1" value="na" />

如果没有名字,也会搞砸验证(如果我删除了表格novalidate)。