javascript - angularjs for循环用于生日字段

Question

我需要创建一个 3 个生日字段(日、月、年)，因为我使用的是 AngularJS，所以我想我可以使用 ngRepeat 指令和类似 i < 31 左右的表达式。但它不起作用。

有人知道我可以做什么来简单地用所有需要的值填充下拉框吗？

谢谢!

Answer 1

ng-repeat 并不是真正可行的方法。而是使用 ng-options 指令传递一个表达式，该表达式从 Controller 模型中的数组中提取标签。

首先构造一个 Controller 来保存年、月和日的数组。在 $scope 对象上创建属性，以便您可以通过 View 上的 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 依赖项，只需对所有三个数组使用一个很好的旧 for 循环。以下代码将为您提供数组的 $scope 访问器:

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

返回到您的 HTML View 中，使用 ng-options 和 ng-model ng-options 指令添加一个选择元素，例如:

<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 模块并向其添加 Controller ，以及向容器添加必要的 ng-app 指令、ng-scope 类和 ng-controller 指令。到目前为止，您将拥有三个下拉列表，分别包含年份列表、12 个月列表和 31 天列表。如果你想有一个依赖日列表，请继续阅读! :)

基础版引用这个plnkr:http://plnkr.co/edit/VfEpwPv084H7XiifEsnm?p=preview

奖励回合:

您可以更进一步，让天数显示正确的天数，因为天数确实取决于所选的月份和年份。二月在非闰年有 28 天，在闰年有 29 天。其他月份有 30 天或 31 天，具体取决于月份。如果你想要花哨的话，你需要 Controller 中的一个函数来确定闰年并确定返回多少天来计算一年是否是 javascript 中的闰年，以下函数非常有用:

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

尽管使用 Angular 它看起来会略有不同，因为 $scope 已经包含了 selectedYear 并且不必传入。isLeapYear 辅助函数由另一个函数访问，该函数确定给定月份显示多少天和年份组合如下:

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

现在，几天来需要在原始选择元素上完成的所有工作就是在 ng-options 指令上添加一个 limitTo 过滤器，以更改实际呈现的元素数量。月份和年份的 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>

在 Controller $scope.UpdateNumberOfDays() 的函数中填充了 NumberOfDays，这当然会利用上述的辅助函数 GetNumberOfDaysInMonth。

作为额外奖励，这里有一个智能版本的 plnkr:http://plnkr.co/edit/AENh6Ynj4kNKZfLsXx4N?p=preview

尽情享受吧!