How to set a default ngOptions value, when options are objects, and default is an integer ID

Question

我正在使用 ngOptions 显示 select 元素，并希望将模型连接到在 ngOptions 中设置为值的值。

var app = angular.module('test', []);

app.controller('TestCtrl', ['$scope',
  function ($scope) {
    //Use random to simulate different data from an API
    $scope.default = Math.floor(Math.random()*3);
    $scope.options = [
      {
        id: 0,
        name: "Option 1"
      },
      {
        id: 1,
        name: "Option 2"
      },
      {
        id: 2,
        name: "Option 3"
      }
    ];
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
  <div ng-controller="TestCtrl">
    <select ng-model="default" ng-options="val.name for val in options track by val.id">
    </select>
    <pre>Default should be ID {{default}}, or Option {{default+1}}
  </div>
</div>

我试过使用 track by、select as，我发现了两个可行但不理想的解决方案。

理想情况下，我可以设置默认

解决方案 1：

// Loop through entire array of objects
$scope.options.forEach(function (v, k) {
  // Compare ID to what the default should be
  if (v.id === $scope.default) {
    // Set object to default
    $scope.default = v;
    return true;
  }
});

解决方案 2：

JS

$scope.options = {
  "Option 1": 0,
  "Option 2": 1,
  "Option 3": 2
};

HTML

<select ng-model="default" ng-options="value as key for (key, val) in options">

此解决方案的难点在于它仅在对象不超过两个值时才有效，因为键不能是对象。

有什么方法可以让 Angular 按键设置默认值，而不必包含整个对象？

Answer 1

var app = angular.module('test', []);

app.controller('TestCtrl', ['$scope',
  function ($scope) {
    //Use random to simulate different data from an API
    
    $scope.options = [
      {
        id: 0,
        name: "Option 1"
      },
      {
        id: 1,
        name: "Option 2"
      },
      {
        id: 2,
        name: "Option 3"
      }
    ];
$scope.default = $scope.options[Math.floor(Math.random()*3)];
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
  <div ng-controller="TestCtrl">
    <select ng-model="default" ng-options="val.name for val in options">
    </select>
    <pre>Default should be ID {{default.id}}, or Option {{default.id+1}}
  </div>
</div>

Answer 2

像这样尝试

<select ng-options="item.id as item.name for item in options" ng-model="selected"></select>

然后在控制器中

$scope.selected = 1;

similar plunkr example

How to set a default ngOptions value, when options are objects, and default is an integer ID

How to set a default ngOptions value, when options are objects, and default is an integer ID

javascript

angularjs

ng-options

angularjs-ng-options

解决方案 1：

解决方案 2：