2014-01-31 13 views
0

我正在使用ng-repeat創建出生日期選擇器下拉菜單。我面臨的問題是我想將選項作爲DD附加到日期,作爲第一個元素的MM作爲月份,YYYY作爲下拉的年份。下面是我使用的下拉創建coode創建出生日期使用ng-repeat使用下拉硬編碼中的第一個元素的下拉菜單

<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); 
     } 
    }); 

回答

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> 
+0

嗨,感謝您的解決方案的另一種方式。所以th鍵是

+0

您可以使用ng-options – Achyut

+0

爲相同的功能提供更好的代碼段嗎?好的,讓我創建一個。 –

0

她e是展現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> 
相關問題