ng-selectのデフォルトは動作しません

Question

私はselectを使用したフォームを持っています。デフォルト値を設定しようとしていますが、無効にしたいので、最初のオプションとして " - select state - "が表示され、ユーザーは選択を強制します。

私の問題は動作していません。選択は常に空白になります。ここで

は私のコードです：

<select ng-model="contactEditCtrl.addressData.state" style="width: 50%;"> 
     <option ng-disabled="$index === 1" ng-selected="true">--Select State--</option> 
     <option value="{{state.abbreviation}}" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option> 
    </select> 

Answer 1

ng-modelによって参照される値がng-optionsに渡されるオプションのセットに存在しない場合、空のオプションが生成されます。これにより、偶発的なモデル選択を防ぐことができます。AngularJSは、初期モデルがオプションのセットで未定義であるかどうかを知ることができ、モデル値を独自に決定したくないということを知ることができます。

つまり、空のオプションは、有効なモデルが選択されていないことを意味します（これは、オプションのセットから有効です）。この空のオプションを取り除くには、有効なモデル値を選択する必要があります。

はhere

から撮影だから私はこのようにそれを書くことをお勧めしたいです。

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

 
// Register MyController object to this app 
 
app.controller('MyController', function MyController($scope) { 
 
    this.addressData = {state: "--Select State--"}; 
 
    this.states = [{abbreviation: 'a', name:'ant'}, {abbreviation: 'b', name:'asd'}, {abbreviation: 'b', name:'asd2'}] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app='myApp' ng-controller='MyController as contactEditCtrl'> 
 
    <select ng-model="contactEditCtrl.addressData.state" style="width: 50%;"> 
 
     <option value="--Select State--">--Select State--</option> 
 
     <option ng-value="state.abbreviation" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option> 
 
    </select> 
 
</div>

Answer 2

デフォルト<option>とng-optionsで、このいずれかを確認します。

<select ng-model="contactEditCtrl.addressData.state" 
     ng-options="state.name as state.name for state in contactEditCtrl.states" > 
     <option value="" ng-disabled="true">-- select state --</option> 
</select> 

Demo fiddle

それはに変換されます。

<select ng-model="addressData.state" style="width: 50%;" 
     ng-options="state.name as state.name for state in states" class="ng-valid ng-dirty"> 
    <option value="" ng-disabled="true" class="" disabled="disabled">-- select state --</option> 
    <option value="0">CCCCC</option> 
    <option value="1">QQQQQQ</option> 
</select>