Как сделать предварительный выбор для списка выбора, сгенерированного AngularJS?

<select ng-model="team.captain" ng-options="player.name for player in team.players"></select>

Это правильно создает список выбора для выбора капитана команды. Однако по умолчанию выбран пустой параметр. Как мы можем предварительно выбрать первого игрока из списка?

<select ng-model="team.captain" ng-options="player.name for player in team.players" class="ng-pristine ng-valid">
  <option value="0">John</option>
  <option value="1">Bobby</option>
</select>

Я попробовал добавить ng-init="team.captain='0'", но это не помогло.

Обновление По-видимому, это происходит потому, что

значение, указанное ng-model, не существует в наборе параметров, переданных в ng-options.

Источник: Почему у AngularJS есть пустая опция в выборе?

Однако остается вопрос, почему использование ng-init не работает?

<select ng-init="team.captain='0'" ng-model="team.captain" ng-options="player.name for player in team.players"></select>

Ответ 1

Вот что сработало:

<select ng-init="team.captain=team.players[0]" 
        ng-model="team.captain" 
        ng-options="player.name for player in team.players"></select>

И что не получилось:

ng-init="team.captain='0'"
ng-init="team.captain='John'"

Я предполагаю, что Angular выходит за рамки простого сравнения значений или ярлыков. Он, вероятно, сравнивает ссылки на объекты.

Ответ 2

Здесь альтернативный метод инициализации выпадающего меню с помощью AngularJS.

(рабочий пример на скрипте JS: http://jsfiddle.net/galeroy/100ho18L/1/)

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-app="" ng-controller="myController">

    <select 
        ng-model="carSelection"
        ng-options = "x.make for x in cars">
    </select>

    <script>

        function myController($scope) {

            $scope.cars = [
                {"make": "Nissan", "model": "Sentra"},
                {"make": "Honda", "model": "Prelude"},
                {"make": "Toyota", "model": "Prius"}
            ]

            $scope.carSelection = $scope.cars[1]; // this line initializes the drop down menu
        }

    </script>

</body>

Ответ 3

Как уже упоминалось в комментарии @camus, вам нужно установить модель в действительное значение метки (или ссылки), а не значение индекса. Это немного странно, так как вы можете увидеть значение индекса, используемое в HTML.

Angular устанавливает атрибуты значений в HTML следующим образом:

при использовании массива в качестве источника данных, он будет индексом элемента массива на каждой итерации;
При использовании объекта в качестве источника данных он будет именем свойства на каждой итерации.

Когда элемент выбран, Angular ищет правильную запись в массиве/объекте на основе имени индекса или свойства.

Ответ 4

Как насчет ng-selected, как показано в this jsfiddle:

<select ng-model="val">
  <option ng-repeat="opt in options" ng-selected="$first">
    {{ opt }}
  </option>
</select>

Ответ 5

Я достиг этого с помощью ng-model и ng-options. В основном ваша модель и ng-параметры должны синхронизироваться.

Когда моя модель (projIndustry в этом случае) была инициализирована некоторым числом, мне пришлось использовать ind.ID в ng-опциях (сравнение ID).
Когда моя модель была инициализирована объектом, мне пришлось использовать ind (object) в ng-опциях. (Сравнение объектов)

<select data-ng-options="ind.ID as ind.Display_Text for ind in arrIndustries" 
 data-ng-model="projIndustry" ng-change="onIndChange()" />