ng-options的一个用法——选择一个属性而不是整个对象

Question

对于一个对象集合，我需要在选择列表中显示该对象的一个属性。我当前的HTML/AngularJS代码是这样的:

<select id="input-platform-id" class="form-control" ng-model="currentFactory.platform_id" data-ng-init="currentFactirt.platform_id" data-ng-options="p.id for p in platforms track by p.id">
</select>

上面的循环遍历一个平台对象集合，它不适合我的需要。我需要初始值与属性和模型的类型相同。

对于这个问题，我可以想到几种方法。我可以更改后端代码，使其具有属性的集合。然而，由于我们的系统已经构建，这需要许多代码更改。在AngularJS层面，我可以将平台对象转换为平台id对象。但是，我不知道如何进行这样的转换。或者，我可以将模型作为平台的相同类型，稍后检索id。但是，如何处理与平台不同的JSON对象类型的初始值?

JSON是这样的:

[
  {        
    "created_by": "joe",
    "created_date": "2015-08-22T05:22:48Z",
    "id": 2,
    "name": "Test Platform"
  }    
  {       
    "created_by": "jobs",
    "created_date": "2015-10-06T23:45:50Z",
    "id": 23,
    "name": "Test Platform 1"
  }
]

AngularJS代码:

  <select id="input-platform-id"
                                    class="form-control"
                                    data-ng-model="selectedPlatformID"
                                    data-ng-init="selectedPlatformID = platforms[0].id"
                                    data-ng-options="platform.id as platform.name for platform in platforms">
  </select>

生成的HTML代码以以下行 开头

 <option value="?" selected="selected" label></option>

rest value字段从0,1,2，…开始在一个递增序列中，这不是id字段中的数据。

谢谢您的建议

Answer 1

有一种语法可以让你两全其美。

<select id="input-platform-id" 
        class="form-control" 
        ng-model="currentFactory.platform_id" 
        data-ng-init="currentFactirt.platform_id = platforms[0].id" 
        data-ng-options="p.id as p.name for p in platforms track by p.id">
</select>

注意:如果您的$scope.platforms是异步来的，请考虑在获取数据时初始化控制器中的ng-model。

---

编辑:包括示例

angular.module('test', [])
.controller('Test', function($scope, $timeout) {
  $scope.platforms = [{
    "created_by": "joe",
    "created_date": "2015-08-22T05:22:48Z",
    "id": 2,
    "name": "Test Platform"
  }, {
    "created_by": "jobs",
    "created_date": "2015-10-06T23:45:50Z",
    "id": 23,
    "name": "Test Platform 1"
  }]
  
  $timeout(function(){
    $scope.selectedPlatformID = 23;
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
  <select id="input-platform-id" 
          class="form-control" 
          data-ng-model="selectedPlatformID" 
          data-ng-options="platform.id as platform.name for platform in platforms">
  </select>
  <br>selectedPlatformID: {{selectedPlatformID}}
</div>