javascript - 誕生日フィールドのangularjs forループ

Question

3 つの誕生日フィールド (日、月、年) を作成する必要があります。AngularJS を使用しているので、i < 31 などの式で ngRepeat ディレクティブを使用できると考えました。しかし、うまくいきません。

ドロップダウンボックスに必要なすべての値を単純に入力するために何ができるか考えている人はいますか?

ありがとう！

Answer 1

ng-repeat は実際に行く方法ではありません。代わりに、コントローラーのモデルの配列からラベルを取得する式を渡す ng-options ディレクティブを使用します。

最初に、年、月、日の配列を保持するコントローラーを作成します。$scope オブジェクトにプロパティを作成して、ビューの ng-options ディレクティブを介してこれらの配列にアクセスできるようにします。

依存関係として JQuery を含める場合は、次の方法で配列を作成できます。

var years = $.map($(Array(numberOfYears)), function (val, i) { return i + 1900; });
var months = $.map($(Array(12)), function (val, i) { return i + 1; });
var days = $.map($(Array(31)), function (val, i) { return i + 1; });

JQuery に依存したくない場合は、3 つの配列すべてに古き良き for ループを使用してください。次のコードは、配列の $scope にアクセサーを提供します。

$scope.Years = years;
$scope.Months = months;
$scope.Days = days;

HTML ビューに戻り、ng-options および ng-model ng-options ディレクティブを使用して select 要素を追加します。次に例を示します。

<div class="ng-scope" ng-controller="BirthdayController">
<select ng-model="SelectedYear" ng-options="label for label in Years"></select> 
<select ng-model="SelectedMonth" ng-options="label for label in Months"></select> 
<select ng-model="SelectedDays" ng-options="label for label in Days"></select>
</div>

AngularJS モジュールの作成とそれにコントローラーを追加すること、および必要な ng-app ディレクティブ、ng-scope クラス、および ng-controller ディレクティブをコンテナーに追加することに精通していることを前提としています。この時点までに、年のリスト、12 か月のリスト、および 31 日のリストをそれぞれ含む 3 つのドロップダウン リストがあります。扶養日のリストが必要な場合は、読み続けてください。:)

基本バージョンについては、この plnkr を参照してください: http://plnkr.co/edit/VfEpwPv084H7XiifEsnm?p=preview

ボーナスラウンド:

これをさらに一歩進めて、日が選択した月と年に実際に依存しているため、日が正しい日数を表示するようにすることができます。2 月は、うるう年以外は 28 日、うるう年は 29 日です。その他の月は、月によって 30 日または 31 日あります。うるう年を決定し、年がうるう年であるかどうかをJavaScriptで計算するために何日返すかを決定する関数がコントローラーに必要な場合は、次の関数が非常に便利です。

var isLeapYear = function (selectedYear) {
var year = SelectedYear || 0;
return ((year % 400 == 0 || year % 100 != 0) && (year % 4 == 0)) ? 1 : 0;}

$scope にはすでに selectedYear が含まれており、渡す必要がないため、Angular を使用すると見た目が少し異なります。isLeapYear ヘルパー関数は、指定された月と年の組み合わせに対して表示する日数を決定する別の関数によってアクセスされます。次のように：

var getNumberOfDaysInMonth = function (selectedMonth) {
var selectedMonth = selectedMonth || 0;
return 31 - ((selectedMonth === 2) ? (3 - isLeapYear()) : ((selectedMonth - 1) % 7 % 2));}

元の select 要素に対して数日間行う必要があるのは、ng-options ディレクティブに limitTo フィルターを追加して、実際にレンダリングされる要素の数を変更することだけです。Months と Years の Select 要素には ng-Change ディレクティブが必要なので、日数を制限する数値を保持する $scope のフィールドを更新できます。

<select ng-model="SelectedYear" ng-options="label for label in Years" ng-change="UpdateNumberOfDays()"></select> 
<select ng-model="SelectedMonth" ng-options="label for label in Months" ng-change="UpdateNumberOfDays()"></select> 
<select ng-model="SelectedDays" ng-options="label for label in Days | limitTo:NumberOfDays"></select>

NumberOfDays は、コントローラー $scope.UpdateNumberOfDays() の関数に取り込まれます。これはもちろん、上記のヘルパー関数 GetNumberOfDaysInMonth を利用します。

追加のボーナスとして、スマート バージョンの plnkr があります: http://plnkr.co/edit/AENh6Ynj4kNKZfLsXx4N?p=preview

楽しみ！

Answer 2

selectディレクティブを、バインド先の数値の配列と組み合わせて使用​​できます。この投稿では、1 から 31 までを埋めるために使用できる関数とフィルターの両方を示します。

配列への select バインディングの基本的な構文は次のとおりです。

<select ng-model="selected" ng-options="n for n in [1, 2, 3, 4, 5, 6]"></select>

を省略した場合、ドロップダウンが表示されないように注意してくださいng-model。

他の人が言及しているように、日付ピッカーを使用することは良いオプションです。ここにある jQuery UI DatepickerにAngularUIラッパー ディレクティブを使用できます。

Answer 3

DatePicker を使用できますか?

http://www.nsftools.com/tips/DatePickerTest.htm