ng-options 不会在初始加载时突出显示所选值

Question

考虑下一个代码示例：

http://plnkr.co/edit/LA6fu1vdzRWFaQw6Zl6S?p=preview

<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="main">
  <select novalidate="" ng-model="selectedItem" ng-options="item.id as item.name for item in items track by item.id"> </select>
</body>

</html>


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

.controller('main', ['$scope',function($scope) {
  $scope.items = [
    {"id":0,"name":"a"},
    {"id":1,"name":"b"},
    {"id":2,"name":"c"},
    {"id":3,"name":"d"}
  ];
  $scope.selectedItem = 1;
}])

我希望在初始加载时 select 元素会有一个 "b" 选项 selected，但它没有。我做错了什么？

Answer 1

您需要：

使用 AngularJS 的更新版本（在脚本中将 1.1.5 更改为 1.6.10）
删除track by item.id，它用于ng-repeat，而不是ng-options

这是一个工作演示：

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

.controller('main', ['$scope',function($scope) {
  $scope.items = [
    {"id":0,"name":"a"},
    {"id":1,"name":"b"},
    {"id":2,"name":"c"},
    {"id":3,"name":"d"}
  ];
  $scope.selectedItem = 1;
}])

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.js"></script>
  </head>

  <body ng-controller="main">
    <select novalidate=""
      ng-model="selectedItem" 
      ng-options="item.id as item.name for item in items">
    </select>
    {{selectedItem}}
  </body>
</html>

ng-options 不会在初始加载时突出显示所选值

ng-options doesn't highlight selected value on initial load

angularjs

ng-options