过滤器修改Angular中的下拉列表后如何删除空选项？答案

【问题标题】：How to remove an empty option after a filter modifies the drop down list in Angular?过滤器修改Angular中的下拉列表后如何删除空选项？
【发布时间】：2017-11-22 05:19:14
【问题描述】：

我正在使用 Angularjs 1.4.2，我必须创建一个由数字和文本组合而成的下拉列表。它是具有两个属性的对象数组。所以我使用数字作为一种标签，并将 0 值和 -1 值转换为文本作为列表的顶部和底部。

我不只是硬编码文本的原因是在过滤器中，我们调用一个服务来更改页面文本的语言，这使得切换语言是动态的，因此我选择了数字标签选项条目的系统。

但是，我一直在列表中看到一个空白选项，并且当下拉菜单出现时，无法预先选择 0 的默认“选择项目”文本。

我发现是这样的

当 ng-model 引用的值时生成空选项在传递给 ng-options 的一组选项中不存在

在这种情况下，放在范围内的原始列表已被过滤器修改，所以我认为这就是空选项出现在下拉列表中的原因。

我的代码在没有过滤器的情况下可以正常工作，但是当我尝试应用过滤器时，出现以下错误： 错误：[$rootScope:infdig] 达到了 10 个 $digest() 迭代。中止！

下拉列表确实具有来自过滤器的正确值，但空选项仍然存在并且它被选中而不是文本“选择项目”，这正是我想要的。

HTML：

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script data-require="angular.js@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

   <body>
    <div ng-controller="Test">
        <p>selected item is : {{selectedItem}}</p>
      <p> The distance of selected item is : {{selectedItem.distance}} </p>
      <select ng-model="selectedItem" ng-options="item.distanceSize for item in items | myFilter" ng-init="selectedItem = items[0]">
      </select>
    </div>
  </body>
</html>

script.js

var app = angular.module('app',[]);

app.controller('Test',function($scope){
   $scope.items = [{"distance": "0", "distanceSize": 0},{"distance": "25", "distanceSize": 25},{"distance": "50", "distanceSize": 50},{"distance": "-1", "distanceSize": -1}];
});

app.filter('myFilter', function () {
  return function (items) {
    var valuesArray = [];
            if(items) {
                for(var i = 0; i < items.length; i++) {
                    var myObject = {};

                    if(items[i].distanceSize === 0) {
                        myObject.distanceLabel = "0";
                        myObject.distanceSize = "Select Item";
                        valuesArray.push(myObject);
                    }else if(items[i].distanceSize == 25) {
                        myObject.distanceLabel = "25";
                        myObject.distanceSize = 25;         
                        valuesArray.push(myObject);
                    }
                    else if(items[i].distanceSize == 50) {
                        myObject.distanceLabel = "50";
                        myObject.distanceSize = 50;         
                        valuesArray.push(myObject);
                    }
                    else if(items[i].distanceSize == -1) {
                        myObject.distanceLabel = "-1";
                        myObject.distanceSize = "Select Everything";            
                        valuesArray.push(myObject);
                    }
                }
            }
            return valuesArray;
  };
});

由于我的下拉列表被过滤器修改，我如何删除或屏蔽空选项以及过滤器为什么会抛出错误？

【问题讨论】：

标签： javascript angularjs dropdown

【解决方案1】：

达到 10 次 $digest() 迭代。中止！

这是一个众所周知的问题。我会参考这个 Stack Overflow 问题：How to Troubleshoot Angular “10 $digest() iterations reached” Error，特别是它对returning new objects. 的回答，每次 angular 调用myFilter 它都会得到一个新的 valuesArray，而不是 === 旧的 valuesArray。 Angular 将此视为更改，并一次又一次地调用过滤器，直到它因错误而中止。

与其将过滤器应用于整个数组，不如将过滤器应用于标签。这会将您的 ng-options 更改为：

ng-options="item.distanceSize for item in items | myFilter"

到

ng-options="item as (item.distanceSize | myFilter) for item in items"

然后更改您的过滤器以处理单个项目：

app.filter('myFilter', function () {
    return function (distanceSize) {
        if (distanceSize === 0)
            return "Select Item";

        if (distanceSize === -1)
            return "Select Everything";

        return distanceSize;
    }
});

您可以在plunker 中看到一个示例。

存在空选项是因为$scope.selectedItem 是一个空值。您可以将其设置为默认值（就像我在 plunker 中所做的那样），也可以对单个元素进行硬编码，并将值设置为空字符串。然后，此元素将表示 null 或“未选择”选项。这可以替换您的“选择项目”选项。您可以在ngOptions documentation 中找到更多相关信息。

【讨论】：

由于没有完全理解这背后的过程，我的过滤器过于复杂。感谢您抽出宝贵的时间！