ngOptions尝试将资源响应用作所选项目时的行为异常

Question

I tried to solve this over an hour, haven't found anything online. This is the template:

        <select
          ng-model="user.platform_id"
          ng-options="platform.id as platform.title for platform in platforms"
          id="platform_id" class="form-control">
        </select>

and this is the controller :

$scope.platforms = platformsEntity.query();
// Resource object coming from UI Router resolve, already fetched with user info
$scope.user = userEntity; 

the platforms resource response return the following format:

[ { id: 4, title: 'platform1'}, { id: 5, title: 'platform2' ]

the user is same, resource object with platform ID

{ id: 3, name: 'foo', platform_id: 5 }

This way I can see all the platforms in the select box but it's not getting selected by the ngModel value (user.platform_id) The thing is that when I use plain object instead of resource:

$scope.platforms = platformsEntity.query();
$scope.user = { platform_id: 5 } ; 

It is getting selected correctly ...

Update

i replicated the behavior i am looking for in ng-repeat:

<select ng-model="user.platform_id" id="platform_id" class="form-control">
    <option 
        value="{{ platform.id }}" 
        ng-selected="user.platform_id == platform.id" 
        ng-repeat="platform in platforms"
    >{{ platform.title }}</option>
</select>

Answer 1

It's not about using a resource, the problem with programmatic selection of ng-options is that the ng-model value should refer to the same object as in the ng-options. In order to initialize the selection, first make sure that the platforms array is populated (query might be async?), then loop through them, and set the id object of the platform of your choice as the platform_id object of the user.

Answer 2

Try something like this. Tell angular what you want to track the value by.

<select
      ng-model="user.platform_id"
      ng-options="platform.title for platform in platforms track by platform.id"
      id="platform_id" class="form-control">
</select>