Question

我正在尝试使用angular.js过滤掉select元素中的一些选项。问题是，对于模型中不符合过滤条件的每个项目，我在选择中得到一个空白选项元素。

我的问题是：

如何修复自定义过滤器以删除空选项？
有没有办法修改我的ng-options指令的值，以便在标记中更加声明地执行此过滤器？

找到它

<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;        
    }
});

用于ng-option的自定义角度过滤器留下空白选项

1 个答案: