AngularJS ng-options ng-model опция, выбранная по id

Question

Почему этот код не работает должным образом?Я ожидаю, что Китай будет выбран в списке выбора, но он пуст.

<div ng-app="app">
  <div ng-controller="appController" class="p-2" ng-init="init()">
    <select
      name="user_country"
      class="form-control"
      ng-model="country"
      ng-options="item.id as item.title for item in countries track by item.id">
      <option value="" disabled>Select Country</option>
    </select>
  </div>
</div>

Контроллер:

var app = angular.module('app', []).controller('appController', ['$scope', function($scope){
  $scope.country = 3
  $scope.countries = [
    {id: 1, title: 'US'},
    {id: 2, title: 'Japan'},
    {id: 3, title: 'China'},
    {id: 4, title: 'Russia'}
  ]
}])

Я ожидаю увидеть Китай, а не пустое поле.Вот пример CodePen https://codepen.io/grinev/pen/YJERvz.

Answer 1

Обновлен ng-options до

ng-options="item.id as item.title for item in countries">

Ответ

без track By - JSFiddle

сtrack By - JSFiddle

track by, насколько я знаю, просто помогает Angular внутренне в сортировке массивов.Значение опций определяется первым аргументом (в вашем случае).Если вы хотите, чтобы он был по идентификатору, тогда вы должны использовать item.id as item.name for item in items

Answer 2

Вы должны хранить объект, а не идентификатор.Поэтому вместо $scope.country = 3; вам нужно поместить его после массива стран и установить в $scope.country = $scope.countries[2];