AngularJs и <select>: выбранные параметры по умолчанию удаляются

Я ожидаю, что следующий код отобразит выпадающий список с третьей опцией, выбранной по умолчанию. Однако, когда я связываю select с угловыми, выбор по умолчанию исчезает. Любая мысль?

var myApp = angular.module('myApp', []);

...

<div>
  <select id="myselection" ng-model="selectedColors">
    <option value="1" >Red</option>
     <option value="2">Blue</option>
     <option value="3" selected="selected">Green</option>
  </select>

  <div>
    Selected Colors: {{selectedColors }}
  </div>
</div>

Вот рабочий пример: http://jsfiddle.net/TXPJZ/134/

Спасибо!

Ответы

Ответ 1

Самый простой способ исправить вашу реализацию - использовать ng-init.

<div>
    <select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
        <option value="1">Red</option>
        <option value="2">Blue</option>
        <option value="3">Green</option>
    </select>
    <div>Selected Colors: {{selectedColors }}</div>
</div>

Попробуйте на FIDDLE.

Ответ 2

Angular переопределяет свойство "selected", когда вы привязываете выбор к модели. Если вы проверите рендер DOM, вы обнаружите, что добавлен новый элемент:

<option value="? undefined:undefined ?"></option>

Чтобы автоматически выбрать третий вариант, вам необходимо предварительно заполнить модель в области. Существует несколько способов сделать это, включая перенос выбора в контроллере:

<div ng-controller="MyCtrl">
    <select id="myselection" ng-model="selectedColors">
        <option value="1">Red</option>
        <option value="2">Blue</option>
        <option value="3">Green</option>
    </select>
<div>Selected Colors: {{selectedColors }}</div>

И затем определение этой модели в контроллере.

var myApp = angular.module('myApp', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
    $scope.selectedColors = 2;
}]);

Вот пример работы.

http://jsfiddle.net/93926/

В качестве альтернативы вы можете просто инициализировать его, используя ng-init, например, в этом примере:

<div ng-init="selectedColors=3">

http://jsfiddle.net/9JxqA/1/

EDIT: Удалено выбранное свойство в первом примере, оно больше не требуется.

Ответ 3

Добавив опцию с пустым значением для выбора и инициализации выделенных цветов для пустой строки (ng-init = "selectedColors = ''" ), мы можем увидеть опцию "Выбрать цвет" сверху вместо того, чтобы первый цвет был выбран по умолчанию:

<div>
<select id="myselection" ng-init="selectedColors=''" ng-model="selectedColors">
    <option value="">Select Color</option>
    <option value="1">Red</option>
    <option value="2">Blue</option>
    <option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>

Попробуйте на Fiddle http://jsfiddle.net/CodecPM/qxyckf7u/

Ответ 4

Вам нужно сделать только две вещи 1) нг-INIT = "дней = 'noday'" 2) нг выбранных = "истина"

 <select class="filtersday" ng-init="days='noday'" ng-model="days">
 <option ng-selected="true" value="noday">--Select Day--</option>

Ответ 5

Использовать ng-selected = "true"

Проверьте приведенный ниже код:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<select ng-model="foo" ng-app >
    <option value="1">1</option>
    <option ng-selected="true" value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>