启用Angular debounce后,单选按钮的变化很慢



当我打开debounce时,单选按钮的切换速度很慢。有半秒钟,我看到两个按钮都启用了,然后旧的按钮被清除了。它可以工作,但视觉上很烦人。

注意:我找到了答案,我只是把这个贴出来给别人学习。

我的代码

<!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>

问题是我忘记在单选按钮集上放置name属性。

          <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表单)。

最新更新