AngularJS - Выбор значения возвращает "? Число: x?" из переменной сферы

Попытка получить начальное значение для элемента select и вместо заполнения значения добавляет странную строку, как показано на этом изображении:

Вот код JavaScript:

 function appCtrl($scope){
        $scope.teams = [
            {teamId: 10, teamName: 'Foo'},
            {teamId: 20, teamName: 'Bar'},
            {teamId: 30, teamName: 'Steve'},
            {teamId: 40, teamName: 'Jobs'},
            {teamId: 50, teamName: 'Macs'}
        ];

        $scope.filters = {
            teamIdSelected: 20
        };
  }

Вот HTML:

<div ng-app ng-controller="appCtrl"> 
    <select class="small" ng-model="filters.teamIdSelected">
        <option ng-repeat="team in teams" value="{{team.teamId}}">{{team.teamName}}</option>
    </select>

Вот jsbin, чтобы продемонстрировать: http://jsbin.com/EKOpAFI/1/edit

Я также попытался использовать невероятно плохо документированный элемент select здесь, но я не могу заставить его работать таким образом, где моя командаId является значение, а имя команды - это метка. Он всегда хочет поместить индекс массива в значение.

Любая помощь будет принята с благодарностью.

Ответ 1

Директива

select действительно немного сложна. Здесь, как это работает в сочетании с директивой ng-options (что удивительно мощно!)

<select 
  ng-model="filters.teamIdSelected"
  ng-options="value.teamId as value.teamName for (key, value) in teams"
  ></select>

Не путайте значения, сгенерированные в DOM, при проверке параметров выбора с помощью инструментов dev. Атрибут value всегда получает свой индекс. Соответствующие пары ключевых значений по-прежнему оцениваются по областям видимости, поэтому вам нужно обновить'ng-model`.

Надеюсь, это поможет!

Ответ 2

Я рекомендую вместо этого использовать ng-options в элементе select:

    <select class="small" ng-model="filters.teamIdSelected" ng-options="team.teamId as team.teamName for team in teams"></select>

Кроме того, если вы хотите включить опцию "Выбрать команду":

<select class="small" ng-model="filters.teamIdSelected" ng-options="team.teamId as team.teamName for team in teams">
  <option value="">Select Team</options>      
</select>

Ответ 3

Это то, что вы хотите:

<select class="small" ng-model="filters.teamIdSelected"
    ng-options="t.teamId as t.teamName for t in teams">
</select>

Не используйте ng-repeat с <option> s.