如何设置ngOptions的默认值，当options是对象时，default是一个整数ID

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

本文关键字：ID default 对象 一个 整数 设置 何设置 ngOptions 默认值 options      更新时间：2023-09-26

我正在使用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
};


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

这个解决方案的困难之处在于，它只在对象不超过两个值的情况下才有效，因为键不能是对象。

有没有办法让Angular通过key来设置默认值，而不必包含整个对象?

像这样试试

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

then in controller

$scope.selected = 1;

类似的plunkr示例

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>

相关文章：