4

我需要创建 3 个生日字段（天、月、年），当我使用 AngularJS 时，我想我可以将 ngRepeat 指令与 i < 31 左右的表达式一起使用。但它不起作用。

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

谢谢！

4

4 回答 4

4

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 依赖项，只需对所有三个数组使用一个很好的旧 for 循环。以下代码将为您提供数组 $scope 上的访问器：

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

回到您的 HTML 视图中，添加一个带有 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 模块并向其添加控制器以及向容器添加必要的 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 过滤器，以更改实际渲染的元素数量。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

享受！

于 2015-03-13T05:04:28.913 回答
0

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

<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;
};
于 2014-02-26T04:16:41.243 回答
0

您可以将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 Datepicker。

于 2012-07-31T19:09:17.790 回答
0

你可以只使用 DatePicker 吗？

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

于 2012-07-31T14:22:50.357 回答