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

Я ожидаю, что следующий код отобразит раскрывающийся список с третьей опцией, выбранной по умолчанию. Однако, когда я связываю select с 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/

спасибо!

11
angularjs html-select

5 ответов

самый простой способ исправить вашу реализацию-использовать 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>

попробовать скрипка.

21

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

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

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

<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: удалено выбранное свойство в первом примере, оно больше не требуется.

9

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

попробуйте на скрипке http://jsfiddle.net/CodecPM/qxyckf7u/

2

вам нужно сделать только две вещи 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>
2

использовать 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>
0