我使用的是 Angularjs 1.4.2，我必须创建一个由数字和文本组合而成的下拉列表。它是具有两个属性的对象数组。所以我使用数字作为一种标签，并将 0 值和 -1 值转换为文本作为列表的顶部和底部。
我不只是对文本进行硬编码的原因是在我们调用服务来更改页面文本语言的过滤器中，这使得它可以动态切换语言，因此我选择了数字标签的原因选项条目系统。
但是，我一直在列表中看到一个空白选项，并且在出现下拉列表时无法预选 0 的默认“选择项目”文本。
我发现的是
the empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to 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;
};
});
由于过滤器修改了我的下拉列表，如何删除或屏蔽空选项以及为什么过滤器会抛出错误？
最佳答案
10 $digest() iterations reached. Aborting!
这是一个众所周知的问题。我会引用这个 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 中所做的那样)，或者您可以对单个元素进行硬编码，并将值设置为空字符串。然后该元素将表示空或“未选择”选项。这可以取代您的“选择项目”选项。您可以在 ngOptions documentation 中找到更多相关信息。 .
关于javascript - 过滤器修改 Angular 中的下拉列表后如何删除空选项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44639911/