Javascript 如何在过滤器修改Angular中的下拉列表后删除空选项？
我正在使用Angularjs 1.4.2，我必须创建一个下拉列表，它是数字和文本的组合。它是一个具有两个属性的对象数组。因此，我使用数字作为标签类型，并将0值和-1值转换为文本作为列表的顶部和底部 我不只是硬编码文本的原因是在我们称之为服务的过滤器中更改页面文本的语言，这使得切换语言是动态的，因此我选择了选项条目的数字标签系统 但是，我一直在列表中看到一个空白选项，当下拉列表出现时，0的默认“选择项”文本无法预选 我发现的是 当ng模型引用值时生成空选项 在传递给ng选项的一组选项中不存在 在本例中，放在范围中的原始列表 已被过滤器修改，因此我假设这就是为什么下拉列表中出现空选项的原因 我的代码在没有过滤器的情况下可以正常工作，但当我尝试应用过滤器时，会出现以下错误： 错误：[$rootScope:infdig]已达到10$digest（）迭代次数。流产 下拉列表中确实有过滤器中的正确值，但是空选项仍然存在，并且它被选中，而不是我想要的文本“Select Item” HTML:Javascript 如何在过滤器修改Angular中的下拉列表后删除空选项？,javascript,angularjs,dropdown,Javascript,Angularjs,Dropdown,我正在使用Angularjs 1.4.2，我必须创建一个下拉列表，它是数字和文本的组合。它是一个具有两个属性的对象数组。因此，我使用数字作为标签类型，并将0值和-1值转换为文本作为列表的顶部和底部 我不只是硬编码文本的原因是在我们称之为服务的过滤器中更改页面文本的语言，这使得切换语言是动态的，因此我选择了选项条目的数字标签系统 但是，我一直在列表中看到一个空白选项，当下拉列表出现时，0的默认“选择项”文本无法预选 我发现的是 当ng模型引用值时生成空选项 在传递给ng选项的一组选项中不存在 在本
<!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>
所选项目为：{selectedItem}
所选项目的距离为：{selectedItem.distance}
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;
};
});
var-app=angular.module（'app'，[]）；
应用程序控制器（'测试'，功能（$范围）{
$scope.items=[{“距离”：“0”，“距离大小”：0}，{“距离”：“25”，“距离大小”：25}，{“距离”：“50”，“距离大小”：50}，{“距离”：“-1”，“距离大小”：-1}]；
});
app.filter（'myFilter'，函数（）{
返回函数（项目）{
var值ray=[]；
若有（项目）{
对于（变量i=0；imyFilterng-options="item.distanceSize for item in items | myFilter"
app.filter('myFilter', function () {
return function (distanceSize) {
if (distanceSize === 0)
return "Select Item";
if (distanceSize === -1)
return "Select Everything";
return distanceSize;
}
});
出现空选项是因为
$scope.selectedItemapp.filter('myFilter', function () {
return function (distanceSize) {
if (distanceSize === 0)
return "Select Item";
if (distanceSize === -1)
return "Select Everything";
return distanceSize;
}
});