Angularがデフォルトで正しい選択オプションを選択しないのはなぜですか？

Question

私たちは、このような選択タグを持っている：

<select id="nonemployeeSelect" 
     ng-model="data.nonEmployeeCase.nonEmployeeId"> 
    <option ng-repeat="nonemployee in data.nonemployees" 
      ng-value={{nonemployee.id}} ng-selected="{{nonemployee.id == @ViewBag.nonempId}}"> 
     {{nonemployee.organization.displayValue}} 
    </option> 
</select> 

NG-モデルは、このような角度のコントローラで初期化プロパティにバインドします

$scope.data.nonEmployeeCase = {}; 
$scope.data.nonEmployeeCase.nonEmployeeId = 1; 

ngのリピートは、上nonEmployeesの配列からですスコープ：

$scope.data.nonemployees 

だから、選択のためのHTMLは、このように見える終わる：

<select id="nonemployeeSelect" ng-model="data.nonEmployeeCase.nonEmployeeId" class="ng-pristine ng-untouched ng-valid ng-not-empty"> 
     <!-- ngRepeat: nonemployee in data.nonemployees --><option ng-repeat="nonemployee in data.nonemployees" ng-value="1" ng-selected="false" class="ng-binding ng-scope" value="number:1" selected="selected"> 
      Office of the Administrator 
     </option><!-- end ngRepeat: nonemployee in data.nonemployees --><option ng-repeat="nonemployee in data.nonemployees" ng-value="2" ng-selected="false" class="ng-binding ng-scope" value="number:2"> 
      Office of Women’s Health 
     </option><!-- end ngRepeat: nonemployee in data.nonemployees --><option ng-repeat="nonemployee in data.nonemployees" ng-value="3" ng-selected="true" class="ng-binding ng-scope" value="number:3"> 
      Office of Budget 
     </option><!-- end ngRepeat: nonemployee in data.nonemployees --><option ng-repeat="nonemployee in data.nonemployees" ng-value="4" ng-selected="false" class="ng-binding ng-scope" value="number:4"> 
      Office of the Administrator 
     </option><!-- end ngRepeat: nonemployee in data.nonemployees --><option ng-repeat="nonemployee in data.nonemployees" ng-value="5" ng-selected="false" class="ng-binding ng-scope" value="number:5"> 
      Division of Budget Execution and Management 
     </option><!-- end ngRepeat: nonemployee in data.nonemployees --><option ng-repeat="nonemployee in data.nonemployees" ng-value="6" ng-selected="false" class="ng-binding ng-scope" value="number:6"> 
      Division of Program Budget Services 
     </option><!-- end ngRepeat: nonemployee in data.nonemployees --> 
    </select> 

したがって、3番目のオプションには「ng-selected == true」があり、選択した式が正しく機能します。

そして、私たちはnem値（1,2,3,4,5,6）をnonemployee.idから取得しました。 そして、コントローラ内に "data.nonEmployeeCase.nonEmployeeId"へのng-modelバインディングがあります。 選択オプションを変更すると、モデル値が更新されます。すばらしいです。

問題は、負荷の実行時にバットから正しい式を選択してモデルを更新するために、ng-valueが選択されている必要があります。そうではありません。モデル値を "data.nonEmployeeCase.nonEmployeeId"から取得し、それを使用して正しいオプションを選択済みに設定しています。

これは他の場所で私のために働いていますが、ここでは働いていません。 誰にも問題が表示されますか？ アイデア

ちょうど逆に働いているようです。 ng-valueの代わりにng-selectedを選択して正しいオプションタグを選択し、モデルを更新すると、モデルは選択されたオプションを初期化しています。その後、別のオプションを選択してモデルを更新することができます。すばらしい。しかし、もう一方の方法を初期化する必要があります。

Answer 1

他の場所と同じように、この方法が私にとってうまくいかない理由はわかりません。しかし、Optionタグでng-initを使って修正しました。

<select id="nonemployeeSelect" 
     ng-model="data.nonEmployeeCase.nonEmployeeId"> 
    <option ng-repeat="nonemployee in data.nonemployees" 
      ng-init="nonemployee.id == @ViewBag.nonempId ? data.nonEmployeeCase.nonEmployeeId = nonemployee.id : null" 
      ng-value={{nonemployee.id}}> 
     {{nonemployee.organization.displayValue}} 
    </option> 
</select> 

Answer 2

ドキュメントはng-selectedがselectディレクティブとng-modelディレクティブで使用すべきではないと警告しています。

注：ngSelectedはselectとngModelディレクティブと相互作用しない、それが唯一の要素でselected属性を設定します。選択にngModelを使用している場合は、ngModelが選択値と選択されたオプションを設定するため、オプションにngSelectedを使用しないでください。詳細について— AngularJS ng-selected Directive API Reference

、参照

• AngularJS Migration Guide (Migrating from 1.3 to 1.4 - select)
• AngularJS Issue #14876 - [bug] ngSelected won't select the option within a ngRepeat
• AngularJS Issue #14916 - <select> with <option> does not set default option correctly
• AngularJS commit - docs(ngSelected): note that it doesn't interact with ngModel