从服务中获取硬编码的下拉值而不是直接显示在 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 更改为这样的内容，您在设置 value 和 display name 的同时实际访问 JSON 属性 <option>。一切都是一样的，只是为了简单起见，我在控制器中硬编码了选项数组。您的主要变化是 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'}

    ];
});

为了您的简单性和进一步试验此代码，这里是 link 到 JSFIDDLE

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

Get hardcoded dropdown values from service instead of directly displaying in html

html

javascript

angularjs

drop-down-menu

angularjs-service