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数组内的元素时都不会重置。

好，仅此而已:)

但是要记住 - 避免尽可能绑定功能来看，只有绑定范围（性能/对象）的成员。