Question

我正在使用ng-repeat创建一个出生日期选择器下拉列表。我面临的问题是我想将选项附加为DD for the Day，MM for Month和YYYY for year作为第一个元素。下面是我用于下拉创建的coode

  <div ng-app="myapp">
     <div ng-controller="ctrlParent">
       <select class="day" id="DateOfBirth_Day" name="DateOfBirthDay" required ng-model="dobday">
         <option ng-repeat="i in getNumber(days) track by $index" value="{{$index+1}}">{{$index+1}}</option>
       </select>
    </div>
  </div>

控制器代码是

    var app = angular.module('myapp',[]);
    app.controller('ctrlParent',function($scope){
       $scope.days= 31;
       $scope.getNumber = function(num) {
         return new Array(num);   
       }
     });

Answer 1

您可以这样处理：http://jsbin.com/OgoqUWe/2/edit

<强>的JavaScript

angular.module('demo', ['ngRoute']);

var demo = angular.module('demo').controller('MainCtrl', function ($scope) {
  $scope.dobday = 'DD';
  $scope.days= 31;
  $scope.getNumber = function(num) {
    return new Array(num);   
  };
});

<强> HTML

  <select class="day" id="DateOfBirth_Day" name="DateOfBirthDay" required ng-model="dobday">
    <option value="DD">DD</option>
    <option ng-repeat="i in getNumber(days) track by $index" value="{{$index+1}}">{{$index+1}}</option>
  </select>

以下是继续ng-options：

的方法

<强>的JavaScript

angular.module('demo', ['ngRoute']);

var demo = angular.module('demo').controller('MainCtrl', function ($scope) {
  $scope.dobday = 'DD';
  $scope.days= 31;
  $scope.nums = ['DD'];
  for (var i = 0; i < $scope.days; i += 1) {
    $scope.nums.push(i + 1);
  }
});

<强> HTML

  <form action="">
    <select class="day" id="DateOfBirth_Day" name="DateOfBirthDay" required ng-pattern="\d+" ng-model="dobday" ng-options="o for o in nums">
    </select>
  </form>

Answer 2

这是显示DOB的另一种方法

<强>的JavaScript

angular.module('demo', ['ngRoute']);

var demo = angular.module('demo').controller('MainCtrl', function ($scope) {
  $scope.totaldays = 31;
  $scope.totalmonths = 12;
  $scope.totalyears = 150;

  $scope.days = [];
  for (var i = 0; i < $scope.totaldays; i += 1) {
      $scope.days.push(i + 1);
  }

  $scope.months = [];
  for (var i = 0; i < $scope.totalmonths; i += 1) {
      $scope.months.push(i + 1);
  }

  $scope.years = [];
  var currentYear = new Date().getFullYear();
  for (var i = currentYear; i > currentYear - $scope.totalyears; i--) {
      $scope.years.push(i - 1);
  }
});

<强> HTML

<div class="row">
  <div class="col-lg-4">
    <label>Select Month</label>
    <select class="form-control" multiple ng-model="users.month" ng-options="o for o in months" required>
      <option value="MM">MM</option>
    </select>
  </div>
  <div class="col-lg-4">
    <label>Select Day</label>
    <select class="form-control" multiple ng-model="users.day" ng-options="o for o in days" required>
      <option value="DD">DD</option>
    </select>
  </div>
  <div class="col-lg-4">
    <label>Select Year</label>
    <select class="form-control" multiple ng-model="users.year" ng-options="o for o in years" required>
      <option value="YYYY">YYYY</option>
    </select>
  </div>
</div>

使用ng-repeat创建出生日期下拉菜单，下拉列表中的第一个元素是硬编码的

2 个答案: