0

2 つの日付値を持つフォームがあります。検証したい: date one は date two よりも前でなければなりません。これを管理するためのディレクティブを実行したいと考えています。そこで、ディレクティブにlowerThanDateという名前を付け、それをテキスト入力に使用しています。このディレクティブは、 dateとcomparisonDateの 2 つの日付属性を使用します。この値を比較して、日付が比較日付よりも低いかどうかを知りたいです。

scope.$evalを使用して、これらの日付値を取得して比較しています。しかし、問題は、scope.$evalが実際の値ではなく以前の値を返すことです。

問題は、実際の日付値を取得するにはどうすればよいかということです。

これは私の問題のプランカーです。私の質問がばかげている場合は申し訳ありませんが、私はAngularでかなり新しいです。よろしくお願いします。

4

2 に答える 2

2

angularjs入力ディレクティブは、プロパティによって入力にバインドされたプロパティ データを自動的に更新しng-modelます。テキストボックスの値が変化すると、バインドされたプロパティも変化します。

さらに、datepicker-popupui-bootstrap ライブラリのディレクティブは既に日付選択イベントを処理して、データ バインドされたプロパティ (この場合はjob.start_date) を更新しています。focusoutこれは、要素のイベントにバインドする必要がないことを意味します。datepicker ディレクティブがこれを処理しています。

ngModelカスタム ディレクティブでコントローラーが必要でありdatepicker-popup、選択した日付が変更されたときに既にデータ バインドされたプロパティに更新が適用されているため、 for$watchの値だけngModel.$modelValueを変更できます。これは、Date属性を完全に削除できることも意味します。

これらすべてを念頭に置いて、ディレクティブのlink関数の本体は次のようになります。

scope.$watch(function(){return ngModel.$modelValue}, function(){
    console.log(ngModel.$modelValue);
    console.log(scope.$eval(attrs.comparsionDate));
});

これが更新された plunkerです。

また、さらに一歩進んで、angularjs のフォーム検証機能を活用して、lowerThanDate 機能を完全に実装しました。選択した日付が比較日付以上の場合、 の$errorプロパティをngModelディレクティブで設定し、HTML で使用してメッセージを表示したり、フォームが送信されないようにしたりできます。

これが plunkerで、フォームの検証に関するブログ投稿が役に立ちました。

于 2013-09-27T22:23:49.173 に答える
0

以下はトリックを行う必要があります。やりたいことは、ng-model 属性を使用して日付入力を値にバインドすることです。ディレクティブ (私の例ではバリデーター) には、Isolate スコープがあります。date:'=' は、ローカル値 (date) と親スコープ値 (dateInput) の間の双方向バインディングを設定します。リンク関数では、dateValidation をディレクティブのスコープに割り当てることができます。これにより、日付間の比較が行われます。

最後に、 ng-show='dateValidation(date, comparisonDate)' は、dateValidation 関数が合格するかどうかに基づいて警告を表示および非表示にします。

また、HTML では comparisonDate のスペルが異なることに注意してください。

angular.module('YourApp')
    .directive('validator', function() {
        return {
            restrict: 'E',
            template: "<div ng-show='dateValidation(date, comparisonDate)'>Dates are out of order</div>",
            scope: {
                date:'=',
                comparisonDate:'='
            },
            link: function(scope) {
                scope.dateValidation = function(date, comparisonDate) {
                    // Your date comparison logic goes here
                    return parseInt(date) > parseInt(comparisonDate);
                };
            }
        }
    });

HTML で、次のように日付を ng-model 属性に添付します。

<p>Date 1: <input type="text" ng-model="dateInput"></p>
<p>Date 2: <input type="text" ng-model="comparisonDateInput"></p>

<validator date="dateInput" comparison-date="comparisonDateInput">

さて、これらの日付を整数として扱っていますが、これはあなたが望むものではありません。しかし、それがあなたにとっての難点だとは思えません。お役に立てれば！

于 2013-09-27T05:01:34.790 に答える