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

Question

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

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/

Спасибо!

Answer 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.

Answer 2

Angular переопределяет свойство selected, когда вы связываете select с моделью. Если вы осмотрите визуализированный 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/

РЕДАКТИРОВАТЬ: Удалено выбранное свойство в первом примере, оно больше не нужно.

Answer 3

Вам нужно сделать только две вещи: 1)ng-init="days='noday'" 2)ng-selected="true"

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

Answer 4

Вы должны использовать одинарные кавычки, чтобы работать в

<select ng-model="liveDataType" ng-init="liveDataType='1'" class="form-control input height" required>
    <option value="1">Running data</option>
    <option value="2">Rest Data</option>
    <option value="3">All Data</option>
</select>

Answer 5

Добавляя параметр с пустым значением для выбора и инициализируя selectedColors в пустую строку (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/

Answer 6

Используйте 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>