使用ng-options时无法设置初始值

Question

I have looked over the 'questions that may have your answer' without any luck. 我已经看过“可能有您答案的问题”，没有任何运气。 nothing worked for me there :( 没有什么对我有用:(

Although it seems that I have a very simple case, something goes wrong... 尽管我的情况似乎很简单，但还是出了点问题...

I have the following HTML: 我有以下HTML：

<body>
  <div ng-controller="eventController as eventCtrl">
    <select ng-init="eventCtrl.userDetails.station = eventCtrl.eventDetails.stations[0]" ng-model="eventCtrl.userDetails.station" ng-options="o as o for o in eventCtrl.eventDetails.stations"></select>
  </div>
</body>

And my angular app looks like this: 我的角度应用看起来像这样：

(function() {
var app = angular.module('eventRegistration', []);
var conn = new dataConn();

app.controller('eventController', ['dataService', function(dataService) {
    var eventCtrl = this;
    eventCtrl.eventDetails = {};
    eventCtrl.userDetails = {};


    dataService.getActiveEvents()
        .then(function (events) {
            eventCtrl.eventDetails = events[0];
        });        
}]);

app.service('dataService',['$q', function($q) {
    return {
        getActiveEvents: function() {
            var deferred = $q.defer();
            conn.getActiveEvents(function(events) {
                deferred.resolve(events)
            });
            return deferred.promise;
        }
    }
}]);
})();

My eventCtrl.eventDetails object will finally looks like this (I'm getting an array of those from the server and for now using only the first one): 我的eventCtrl.eventDetails对象最终将如下所示（我从服务器获取了一个数组，现在仅使用第一个）：

    {
        "date":new Date(2014, 10, 2),
        "isActive": true,            
        "stations":['STATION_A', 'STATION_B'],                        
        "comments":""
    }

I'm trying to set the model of the user's selected station to eventCtrl.userDetails.station and initiate its value to the first station of eventCtrl.eventDetails.stations using ng-init. 我正在尝试将用户所选站点的模型设置为eventCtrl.userDetails.station，并使用ng-init将其值初始化为eventCtrl.eventDetails.stations的第一个站点。

It is important to mention that the stations data (all event details actually) is being fetched async (using deferred object). 值得一提的是，站数据（实际上是所有事件的详细信息）是异步获取的（使用延迟的对象）。

The result of my code is a selection box with 'STATION_1' and 'STATION_B' values, but I have an additional first empty value. 我的代码的结果是一个带有'STATION_1'和'STATION_B'值的选择框，但我还有一个第一个空值。 it seems that something is wrong in my the ng-init definition. 在ng-init定义中似乎出了点问题。
Any ideas? 有任何想法吗？

Thanks so much! 非常感谢！

Answer 1

**ng-selected** will fit your need.
After making an async call to the server, assign the value which you want to initialize to a scope variable and use that variable in ng-selected.

`<select ng-if="selecteditem" ng-model="selecteditem" ng-options="item for item in items.name" ng-selected="selecteditem">
  </select>`

Here selecteditem is the variable which you want to initialize.

`myapp.controller('ItemCtrl',['$scope','$http', function($scope,$http)  //No I18N 
{  
  $scope.items = {"name":['first','second']}
  $scope.selecteditem = $scope.items.name[0]
}]);`


Since you mentioned an async call use **ng-if** such that select will be displayed only it has data.You can display some default values using **ng-if="!selecteditem"**

see the plnkr http://plnkr.co/edit/hv2OI1If1FMGhV0dgj9a?p=preview

使用ng-options时无法设置初始值

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-10-11 08:06:42

使用ng-options时无法设置初始值

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-10-11 08:06:42

解决方案1
0 已采纳 2014-10-11 08:06:42