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"}; 

它似乎工作。問題是，如果我沒有定義默認選項，則選擇按照它應該的方式工作。但是現在我定義一個默認選項，然後以編程方式向列表中添加一個選項，更改選擇會導致選擇框恢復爲第一次的空值，但在以下所有時間都可以工作。所以用戶實際上必須選擇兩次才能識別它。

我在這裏犯了一個非常明顯的錯誤嗎？請幫忙。

Answer 1

好了，第一件事第一 - 這是一個工作的解決方案：https://jsfiddle.net/jf5gggj0/1/

我做的第一件事就是從一個功能改變CreatePlayer.getQualities到一個數組。爲什麼？因爲明智的表現要好得多 - 與其在每個摘要循環（發生很多事情）上調用此函數，Angular現在可以跟蹤對象的變化。

前：

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); 
    } 
}; 

什麼這個函數的作用是，它檢查是否複選框被選中（if(CreatePlayer.form.p1080){ ... }），如果這樣做，增加了HD選項，選擇選項，否則，它會刪除它：

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 

然後我使用a（持有「HD」的位置）可變，從數組中刪除該元素：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" 

我除去track by item.quality因爲選擇的ngModel是引用到一個元件的CreatePlayer.getQualities陣列內側控制r：CreatePlayer.form.defaultQuality = CreatePlayer.getQualities[0];所以現在Angular會管理選擇值的綁定，這就是爲什麼在每次更改getQualities數組內的元素時都不會重置。

好，僅此而已:)

但是要記住 - 避免儘可能綁定功能來看，只有綁定範圍（性能/對象）的成員。