Question

我的问题是，用户更改了checkin日期，然后继续设置checkout日期，但在他有机会完成设置checkout日期之前，ng - checkin的更改会触发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}">

只要用户在结帐领域做东西，有没有办法让ng-change不会在签到字段中触发？（或者如果可能的话，它有焦点吗？）欢迎任何想法。

Answer 1

您可以使用ng-focus和ng-blur来实现此目的。我创建了一个模拟这个的plunker。 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.当用户同时选择两个日期但现在再次更改签入日期时，在这种情况下，如果用户更改签入日期，您可以清除签出日期值

在用户完成输入

2 个答案: