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

    ]; 
} 

}]); 

を作成しました。私は次のように日の種類を取得しようとしました。 Htmlの

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

で

$scope.DayType = DayService.getDayDetails(); 

誰かが私が私がここで間違って何をしたか知らせてくださいすることができます。

Answer 1

あなたは<option>のvalueとdisplay nameを設定しながら、あなたが実際にJSONのプロパティにアクセスし、このような何かにあなたのng-repeatを変更する必要があります。すべてが同じですが、わかりやすくするために、コントローラ内にオプション配列をハードコードしてあります。主な変更は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