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的{{1}}和value时，您需要将display name更改为实际访问JSON属性的位置。一切都是一样的，为了简单起见，我在控制器内硬编码了选项数组。您的主要变化是HTML。

HTML

<option>

控制器

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

为了您的简单和进一步尝试此代码，这里是指向JSFIDDLE

的链接

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

1 个答案: