避免在用戶輸入完成前觸發ng-

我的問題是用戶更改了日期checkin，然後繼續設置checkout日期，但在他有機會完成設置checkout日期之前，ng-從checkin的變化觸發vm.setDates並打斷他完成選擇日期。避免在用戶輸入完成前觸發ng-

這裏是我的代碼：

<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-變化不籤場觸發只要？（或者如果可能的話，它有重點？）任何想法都是值得歡迎的。

來源

2017-08-22 torbenrudgaard

您可以在「vm.setDates」添加一個條件，看看如果「vm.checkin」和「 vm.checkout「被設置，然後才運行該功能。例如if（vm.checkin && vm.checkout）{<在此處執行ng-change功能} –

如果用戶只是在那裏更改其中一個日期 – torbenrudgaard

您可以使用ng-focus和ng-blur來實現這一點。我已經創建了一個模擬這個的笨蛋。 ng-change函數只顯示修改後的數據，因爲我不確定ng-change函數在你的應用程序中做了什麼。您可以修改「modifyInput（）」函數中的if條件以適合您的需求。應該可以通過在ng-focus和ng-blur上使用標誌來實現。因爲我不確定你的具體需求是什麼，所以我沒有和周圍的人一起玩。就像上面提到的@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="[email protected]" 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; 
    } 
});

來源

2017-08-23 08:12:07

Vijay這是一個BRILLIANT解決方案！ 'ng-focus =「input1flag = true」ng-blur =「input1flag = false」'是合乎邏輯和優雅的 - 正是我想要的 - 非常感謝你！ – torbenrudgaard

我剛完成實現無處不在，它像一個魅力 – torbenrudgaard

很高興我可以幫助:) –

如果您希望僅在用戶選擇退房日期時觸發查詢，則只能在結帳日期字段中使用ng-change="vm.setDates(vm.checkin, vm.checkout)。

現在可能會發生以下情況： 1.當用戶只選擇退房日期而不選擇入住日期時，在這種情況下，您可以禁用退房字段，直到退房字段爲空。 2.當用戶選擇兩個日期，但現在只改變入住日期，所以在這種情況下，如果用戶更改入住日期，您可以清除退房日期值

來源

2017-08-22 18:28:19

通常用戶只是在那裏更改其中一個日期，然後如果他只改變簽入日期就不會工作。我需要的是看起來用戶是否已經關注日期字段之一。 – torbenrudgaard

如果你想要採取行動聚焦，然後去ng焦點，它在輸入處於焦點狀態時工作 –

避免在用戶輸入完成前觸發ng-

回答

相關問題