避免在用户完成输入之前触发ng-change

Question

我的问题是用户更改了checkin日期，然后继续设置checkout日期，但是在他有机会完成设置checkout日期之前，从checkin ng-change会触发vm.setDates并中断他的选择日期。

这是我的代码：

<input type="date" ng-model="vm.checkin" id="checkinDate" ng-change="vm.setDates(vm.checkin, vm.checkout)" ng-model-options="{debounce:3000}">
<input type="date" ng-model="vm.checkout" id="checkoutDate" ng-change="vm.setDates(vm.checkin, vm.checkout)" ng-model-options="{debounce:3000}">

有没有一种方法，只要用户在checkout字段中进行操作，ng-change不会在checkin字段中触发？ （或者如果可能的话，它有重点吗？）欢迎任何想法。

Answer 1

您可以使用ng-focus和ng-blur来实现。 我创建了一个模拟这个的插件。 ng-change函数仅显示修改后的数据，因为我不确定ng-change函数在您的应用程序中做什么。 您可以将“ modifyInput（）”函数中的if条件修改为适合您需要的条件。 应该可以通过使用ng-focus和ng-blur上的标志来实现。 我不太了解if条件，因为我不确定您的特定需求是什么。 就像上面提到的@Varun不同场景一样。

http://plnkr.co/edit/uX1IObE9NIRS9okKhwn2?p=preview

HTML：

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <input type="text" ng-model="input1" ng-change="modifyInput()" ng-focus="input1flag=true" ng-blur="input1flag=false">
    <input type="text" ng-model="input2" ng-change="modifyInput()" ng-focus="input2flag=true" ng-blur="input2flag=false">
    <p>Input 1 : {{input1_mod}}</p>
        <p>Input 2 : {{input2_mod}}</p>
<button ng-click="display()">submit</button>
<div ng-show="btnClick">
    <h4>{{input1_mod}}</h4>
        <h4>{{input2_mod}}</h4>
    </div>
  </body>

</html>

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.btnClick=false;
  $scope.input2flag=false;
   $scope.input1flag=false;

  $scope.modifyInput = function() {
   if($scope.input1 && $scope.input2) {
$scope.input1_mod=$scope.input1+'modified';
$scope.input2_mod=$scope.input2+'modified';
}
 if($scope.input1 && !$scope.input2) {
    if ($scope.input2flag) {
    $scope.input1_mod=$scope.input1+'modified';
$scope.input2_mod=$scope.input2+'modified';
}
 }
   if($scope.input2 && !$scope.input1)
    if ($scope.input1flag) {
    $scope.input1_mod=$scope.input1+'modified';
$scope.input2_mod=$scope.input2+'modified';
}
  }

  $scope.display = function() {
     $scope.btnClick=true;
  }
});

Answer 2

如果您希望仅在用户选择退房日期时才触发查询，则可以仅在退房日期字段中使用ng-change="vm.setDates(vm.checkin, vm.checkout) 。

现在，如果发生以下情况，可能会出现以下问题：1.当用户仅选择退房日期而不是入住日期时，因此在这种情况下，您可以禁用退房字段，直到入住字段为空。 2.当用户同时选择两个日期但现在又仅更改入住日期时，因此在这种情况下，如果用户更改了入住日期，则可以清除退房日期值