ユーザーが入力を完了する前にng-changeを引き起こさないようにする

私の問題は、ユーザがcheckinの日付を変更してからcheckoutの日付に設定することですが、checkoutの日付を設定する前に、 checkinから変更するとvm.setDatesが発生し、日付の選択が完了しなくなります。ここでユーザーが入力を完了する前にng-changeを引き起こさないようにする

私のコードです：

<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.checkin" かどうかを確認するために、 "vm.setDates" で条件を追加することができますし、 " vm.checkout "が設定され、関数が実行されます。何かのようなものがあれば（vm.checkin && vm.checkout）{<ここでng-change関数を実行} –

ユーザーがただちに日付の1つを変更する場合にはうまくいきません – torbenrudgaard

ng-focusとこれを達成するためにぼかしをかける。私はこれをシミュレートするプランナーを作成しました。 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="[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

ビジェイこれは素晴らしいソリューションです！ '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

多くの場合、彼はチェックインの日付を変更するだけで動作しません。私が必要とするのは、ユーザーが日付フィールドの1つにフォーカスを持っているかどうかを調べるものです。 – torbenrudgaard

フォーカスが合っている状態でアクションを実行したい場合は、フォーカスが合っている状態で、入力がフォーカス状態のときに機能します –

ユーザーが入力を完了する前にng-changeを引き起こさないようにする

答えて

関連する問題