Javascript 生日字段循环的angularjs

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

有人知道我能做些什么来简单地用所有需要的值填充一个下拉框吗

---

谢谢

你能用一个日期选择器吗

您可以将指令与要绑定的数字数组结合使用。显示可用于从1-31填充的函数和筛选器

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

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

注意：如果省略了

ng型号

，则下拉列表似乎不会填充

---

正如其他人所提到的，使用日期选择器是一个很好的选择，您可以使用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;
};

$scope.birthDays=函数（）{
var year=parseInt（$scope.birthdate.year，10）；
var month=parseInt（$scope.birthdate.month，10）；
var num=新日期（年、月+1,0）.getDate（）；
var i；
风险值天数=[]；
对于（i=1；ing 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依赖项，只需对所有三个数组使用一个好的旧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>

尽管使用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（）上的函数中，该函数当然将使用上述帮助函数GetNumberOfDaysInMonth

作为额外的奖励，这里有一个智能版plnkr：

享受吧！
这可能会奏效，但如果有可能的话，这也可能比使用简单的angularjs表达式要多做一些工作……我会在任何时候为这种功能使用日期选择器。我不同意，日期选择器并没有提供一种简单的方法来选择年份。我会使用Gloopy提到的带有ng选项的select，或者使用UI掩码来手动选择年份输入日期选择器不是一种方便用户输入出生日期的方法。谢谢！我们实际上删除了angularjs，现在才开始使用jQuery。对于我们来说，这是一个简单的步骤，现在看起来非常简单，它直接对我们起作用。但我会在家里测试这一点……非常好的答案！谢谢：）
<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>