AngularJSは選択ボックスでユーザー選択を選択していません

Question

あなたの人生ではとてもうまくやってくれることを祈っています。私は、デフォルトの選択肢を持つ選択ボックスを作成しようとしており、必要に応じて選択を変更できるようにしています。ここで

JSFiddleです：https://jsfiddle.net/ibnyusrat/jf5gggj0/

私は選択ボックスとそのオプションを記述するためにこのラインを使用しています：

<select name="defaultQuality" ng-model="CreatePlayer.form.defaultQuality" ng-options="item.quality as item.label for item in CreatePlayer.getQualities() track by item.quality"> 
    <option style="display:none" value="">Select a quality</option> 
</select> 

をとオプションを生産する機能は次のとおりです。

CreatePlayer.getQualities = function(){ 
    var c = Array(); 
    c[0] = {quality:"SD",label:"SD"}; 
    if(CreatePlayer.form.p1080){ 
     c[1]={quality:"HD",label:"HD"} 
    } 
    return c; 
} 

この行を削除した場合は、

CreatePlayer.form.defaultQuality = {quality:"SD",label:"SD"}; 

うまくいくようです。問題は、既定のオプションを定義しないと、選択が正常に動作することです。しかし、私はデフォルトのオプションを定義し、プログラムでオプションをリストに追加する瞬間、選択を変更すると、選択ボックスは最初の時間の空の値に戻りますが、その後のすべての時間で機能します。したがって、ユーザーは実際にそのオプションを認識するためには、そのオプションを2回選択する必要があります。

私はここで非常に明白な間違いをしていますか？助けてください。

Answer 1

最初オクラホマので、最初のもの - これは実用的なソリューションです：私がやったhttps://jsfiddle.net/jf5gggj0/1/

最初のものは、配列に機能からCreatePlayer.getQualitiesを変更することです。どうして？それはパフォーマンスがはるかに優れているからです - どのダイジェストサイクル（多くの場合起こります）でこの関数を呼び出すのではなく、オブジェクトの変更をただちに追跡できるようになりました。

前：

CreatePlayer.getQualities = function(){ 
    var c = Array(); 
    c[0] = {quality:"SD",label:"SD"}; 
    if(CreatePlayer.form.p1080){ 
     c[1]={quality:"HD",label:"HD"} 
    } 
    return c; 
} 

後：私がやった

CreatePlayer.getQualities = [{quality:"SD",label:"SD"}]; 

次の事はあなたがチェックし、次の関数を呼び出し、チェックボックス、上ng-change="CreatePlayer.enableHD()"を追加することでした/それをオフにします。

CreatePlayer.enableHD = function() { 
    if(CreatePlayer.form.p1080){ 
     CreatePlayer.getQualities.push({quality:"HD",label:"HD"}); 
     return; 
    } 
    var a = CreatePlayer.getQualities.map(function(e) { return e.quality; }).indexOf('HD'); 
    if(a !== -1) { 
     CreatePlayer.getQualities.splice(a, 1); 
    } 
}; 

その後、

var a = CreatePlayer.getQualities.map(
    // return an array of the "quality" values, and keeps the same indexes as the original "getQualities" array 
    function(e) { return e.quality; } 
).indexOf('HD'); // Return the position of "HD" in order to remove it from the original "getQualities" array 

そして私は：

何この機能はありませんが、それ以外の場合はそれを削除し、（if(CreatePlayer.form.p1080){ ... }）ボックスがチェックされている場合、それはチェックすることで、それがない場合、それは選択オプションにHDオプションを追加配列から要素を削除するには、変数（「HD」の位置を保持している）aを使用します。CreatePlayer.getQualities.splice(a, 1);

最後の事はngOptions式を変更することでした。前

：

ng-options="item.quality as item.label for item in CreatePlayer.getQualities() track by item.quality" 

後：

ng-options="item as item.label for item in CreatePlayer.getQualities" 

選択のngModelはがでCreatePlayer.getQualities配列内部要素に参照しているので、私はtrack by item.qualityを除去コントロールr：CreatePlayer.form.defaultQuality = CreatePlayer.getQualities[0];これでAngularは選択値のバインドを管理します。そのため、getQualities配列内の要素を変更するときにリセットされません。

まあ、それはそれについてです:)

しかし、単に覚えている - はスコープ（プロパティ/オブジェクト）のメンバーを結合し、ビューに可能な結合機能な限り避けてください。