AngularJs ve <select>: Varsayılan seçili seçenekler kaldırıldı

Question

Aşağıdaki kodun varsayılan olarak seçili üçüncü seçenekle bir açılır liste oluşturmasını bekliyorum. Ancak, select'i angularjs ile bağladığımda, varsayılan seçim kaybolur. Herhangi bir düşünce? http://jsfiddle.net/TXPJZ/134/

Teşekkür:

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> 

İşte çalışan bir örnektir!

Answer 1

Uygulamanızı düzeltmenin en kolay yolu ng-init kullanmaktır.

<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'dan deneyin.

Answer 2

Seçme, bir modele bağladığınızda "seçili" özelliği geçersiz kılar. Eğer işlenen DOM incelemek Eğer yeni bir öğe eklendiğini göreceksiniz:

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

otomatik kapsamında önceden doldurmak modeli gereken üçüncü seçeneği seçmek için.

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

Sonra denetleyicisi o modeldeki tanımlayan: bir denetleyici seçin sarma dahil bunu yapmanın birkaç yolu vardır.

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

İşte çalışan bir örnek.

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

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

EDIT:

http://jsfiddle.net/93926/

Alternatif olarak, sadece ng-init böyle bu örnekte olduğu gibi kullanarak ilklendireceğiniz ilk örnekte seçilen özellik kaldırıldı, bu kadar artık gerekli değil.

Answer 3

selectedColors öğesini boş dizgeye (ng-init = "selectedColors = ''") seçmek ve başlatmak için boş değere sahip seçenek ekleyerek, varsayılan olarak seçilecek ilk renk yerine üstte 'renk Seç' seçeneğini görebiliriz :

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

2) ng seçilmiş =" sadece iki şey "günler = 'noday'" 1) ng-init = yapmanız gereken

Answer 4

Fiddle http://jsfiddle.net/CodecPM/qxyckf7u/ deneyin true "

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

Answer 5

Kullanım

kontrol altına kod = "true" ng seçilmiş:

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