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>

剩余值字段从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>

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

1 个答案: