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选项添加到选项中，否则会删除它：< / p>

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，因为select的ngModel 引用了CreatePlayer.getQualities数组中的元素 控制器：CreatePlayer.form.defaultQuality = CreatePlayer.getQualities[0];所以现在Angular为你管理选择值的绑定，这就是为什么你在更改getQualities数组中的元素时不会重置它。

嗯，那就是它:)

但请记住 - 尽可能避免绑定函数到视图，只绑定范围的成员（属性/对象）。

AngularJS未在选择框

1 个答案: