javascript - 从服务中获取硬编码的下拉值，而不是直接在 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>

我尝试从 angualrjs 服务获取该值，而不是直接在 html 中编码下拉值。

我创建了以下服务

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

    ];
}

}]);

在 Controller 中提供适当的服务注入(inject)。我尝试如下获取日期类型。

$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类似于这样，您在设置 value 时实际访问 JSON 属性和display name <option>的。一切都是一样的，只是为了简单起见，我在 Controller 内对选项数组进行了硬编码。对您而言，主要的更改是 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'}

    ];
});

为了简单起见并进一步试验此代码，这里提供了 JSFIDDLE 的链接。