在ng选项中使用的自定义角滤波器会留下空白选项。

Question

我试图使用angular.js筛选出select元素中的一些选项。问题是，对于模型中不符合筛选条件的每一项，我在select中都会得到一个空白选项元素。

我的问题是：

如何修复自定义筛选器以删除空选项？

是否有方法修改我的ng选项指令的值，以便在标记中以更声明的方式执行此筛选器？

代码在下面，您也可以在http://jsfiddle.net/G4qkW/上找到它

<div ng-app="myApp">
<div ng-controller="myController">
    <select ng-model="militaryBranches" ng-options="m as m | coreBranches for m in militaryBranches">
        <option value="">Select Military Branch</option>
    </select>    
</div>

​

function myController($scope) {
    $scope.militaryBranches = [{
        BranchId: '1',
        Name: 'Air Force'
    },{ 
        BranchId: '2',
        Name: 'Army'
    },{
        BranchId: '3',
        Name: 'Coast Guard'
    },{
        BranchId: '4',
        Name: 'Marines'        
    },{
        BranchId: '5',
        Name: 'Navy'
    },{
        BranchId: '6',
        Name: 'National Guard 1'   
    },{
        BranchId: '7',
        Name: 'National Guard 2'
    },{
        BranchId: '8',
        Name: 'Some Other Branch'
    }];
}

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

app.filter('coreBranches', function() {
    return function(item) {
         if (item.BranchId < 6) {
              return item.Name;
         }
    };
});

Answer 1

我编辑了你的小提琴：http://jsfiddle.net/G4qkW/5/

我想你想把树枝过滤掉，而不是显示它们的名字。您需要将筛选器应用于集合，而不是应用到名称：

m.BranchId as m.Name for m in militaryBranches | coreBranches

若要使此操作，请按以下方式编辑筛选器：

app.filter('coreBranches',
function () {
    return function (items) {
        var filtered = [];
        angular.forEach(items, function (item) {
            if (item.BranchId < 6) {
                filtered.push(item);
            }
        });
        return filtered;        
    }
});