angularjs用于生日字段的循环

angularjs for loop for birthday field

本文关键字：循环 字段 生日 用于 angularjs      更新时间：2024-06-10

我需要创建一个3个生日字段（天、月、年），由于我使用AngularJS，我认为我可以将ngRepeat指令与I<31岁左右。但它不起作用。

有人知道我可以做些什么吗？只需在下拉框中填写所有需要的值？

谢谢！

ng-rerepeat不是真正的方法。相反，使用传入表达式的ng-options指令，该表达式从控制器模型中的数组中提取标签。

首先构造控制器，该控制器将保存Years、Months和Days的数组。在$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依赖项，只需为所有三个数组使用一个好的旧for循环。以下代码将在数组的$scope上为您提供一个访问器：

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

回到HTML视图中，添加一个带有ng选项和ng模型ng选项指令的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天列表。如果你想有一个依赖日列表，请继续阅读！：）

有关基本版本，请参阅此plnkr：http://plnkr.co/edit/VfEpwPv084H7XiifEsnm?p=preview

奖励回合：

您可以更进一步，使天数显示正确的天数，因为天数确实依赖于所选的月份和年份。二月在非闰年有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;}

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

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

现在，在最初的select元素上几天所需要做的就是在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>

其中NumberOfDays填充在控制器$scope.UpdateNumberOfDays（）上的函数中，当然它将使用上面描述的助手函数GetNumberOfDatesInMonth。

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

享受吧！

你能使用DatePicker吗？

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

您可以将select指令与要绑定的数字数组结合使用。这篇文章展示了一个函数和一个过滤器，您可以使用它来填充1-31。

以下是选择绑定到数组的基本语法：

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

请注意，如果省略ng-model，则下拉列表似乎不会填充。

正如其他人所提到的，使用日期选择器是一个很好的选择，您可以使用AngularUI包装器指令来处理这里的jQuery UI日期选择器。

我的方法包括使用以下内容填充日期选择列表：

<select class="form-control" ng-model="birthdate.day"
        ng-options="day for day in birthDays()">
</select>

在控制器上，birthDays（）函数是：

$scope.birthDays = function () {
  var year = parseInt($scope.birthdate.year, 10);
  var month = parseInt($scope.birthdate.month, 10);
  var num = new Date(year, month + 1, 0).getDate();
  var i;
  var days = [];
  for (i = 1; i <= num; i++) {days.push(String(i)); }
  return days;
};
相关文章：