带有去抖动的表格手表在击中时会触发多个ng-submit事件

时间:2017-07-28 18:31:13

标签: angularjs

我需要观看更改的表单输入并触发搜索。搜索还包含许多用于搜索的过滤器(未在plnkr中显示)。我正在观看表单对象来完成此任务。输入被去抖动,以便不重复请求。我遇到的问题是,当用户输入搜索值并点击输入时,submit()功能会触发两次,一次来自观察,另一次来自输入键ng-submit。我怎么重构这个?我需要用户能够在搜索字段中输入文本并在去抖动间隔后触发搜索触发器,但是如果他们输入文本并点击输入则应该忽略手表。我可以想到尝试解决这个问题的方法可能不同,但希望我能从你们中间找到一个首选的解决方案:)谢谢!

请参阅:https://plnkr.co/edit/LS5cQzs9X4NGI745po7C?p=preview

<body ng-app="submitExample">
  <script>
  angular.module('submitExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.list = [];
      $scope.text = 'hello';
      $scope.$watch('text', function(newValue, oldValue) {
        if(newValue != oldValue) {
          $scope.submit();
        }
      });
      $scope.submit = function() {
        if ($scope.text) {
          $scope.list.push(this.text);
        }
      };
    }]);
</script>
<form ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter:
  <input type="text" ng-model="text" ng-model-options="{ debounce: 1000 }" name="text" />
  <input type="submit" id="submit" value="Submit" />
  <pre>list={{list}}</pre>
</form>
</body>

0 个答案:

没有答案