從服務獲取硬編碼的下拉值而不是直接顯示在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