从服务获取硬编码的下拉值而不是直接显示在html中

Question

我有这个html代码。

<select ng-model="Type"> 
<option value=""></option> 
<option value="10D">10 Days</option> 
<option value="20D">20 Days</option> 
<option value="30D">30 Days</option> 
</select> 

而不是直接编码html中的下拉值，我试图从angualrjs服务得到这个值。

我通过提供服务的适当的注射创建了以下服务

DayServiceMod.service('DayService', ['$http', '$q', function ($http, $q, $scope) { 
this.getDayDetails =function() { 

    return [ 
    {DayValue: '10D' , DayDisplay: '10 Day'}, 
    {DayValue: '20D' , DayDisplay: '20 Day'}, 
    {DayValue: '30D' , DayDisplay: '30 Day'} 

    ]; 
} 

}]); 

在控制器。我试图获得如下日期类型。

$scope.DayType = DayService.getDayDetails(); 

在HTML

<select ng-model="Type"> 
<option value="" disabled>Select Volume...</option> 
<option ng-repeat="DayValue in DayType" value="{{DayValue}}">{{DayDisplay}}</option> 
</select> 

可有人请让我知道我做错了什么在这里。

Answer 1

您需要将您的ng-repeat改变这样的事情，你真正访问JSON属性而设置value和<option>的display name。一切都是一样的，只是为了简单，我已经硬编码控制器内的选项数组。你的主要变化是HTML。

HTML

<div ng-app="myapp" ng-controller='FirstCtrl'> 
<select ng-model="Type"> 
    <option value="" disabled>Select Volume...</option> 
    <option ng-repeat="Day in DayType" value="{{Day.DayValue}}">{{Day.DayDisplay}}</option> 
</select> 
</div> 

控制器

var myapp = angular.module('myapp', []); 
myapp.controller('FirstCtrl', function ($scope) { 
    $scope.selectedRegione = 'Mike'; 
    $scope.DayType =[ 
    {DayValue: '10D' , DayDisplay: '10 Day'}, 
    {DayValue: '20D' , DayDisplay: '20 Day'}, 
    {DayValue: '30D' , DayDisplay: '30 Day'} 

    ]; 
}); 

为了您的简单性和进一步的实验与这里的代码是链接到JSFIDDLE