Get hardcoded Dropdown-Werte aus Service statt direkt in HTML

Question

Ich habe diesen HTML-Code.

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

Anstatt die Drop-Down-Werte in html direkt Codierung, Ich versuche, diese Werte von den angualrjs Service zu erhalten.

I erstellt den folgenden Dienst

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'} 

    ]; 
} 

}]); 

In der Steuerung durch eine geeignete Injektionen von Service. Ich habe versucht, Tagestypen wie folgt zu bekommen.

$scope.DayType = DayService.getDayDetails(); 

Im Html

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

Kann mir jemand bitte lassen Sie wissen, was ich hier falsch gemacht haben.

Answer 1

Sie benötigen ng-repeat zu so etwas ändern, in dem Sie tatsächlich die JSON-Eigenschaft zugreifen, während die value und display name der <option> Einstellung. Alles ist gleich, nur aus Gründen der Einfachheit habe ich das Optionsfeld innerhalb des Controllers hart codiert. Die wichtigste Änderung für Sie ist das 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> 

-Controller

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'} 

    ]; 
}); 

Für Ihre Einfachheit und weiteren Versuch mit diesem Code hier ist der Link zu JSFIDDLE