AngularJS自定义过滤器实现：替换下拉筛选并整合至控制器

一、自定义过滤器的正确注册方式 #

你写的myCustomeFilter已经是标准的AngularJS过滤器注册方式，不需要放到控制器里，只要保证这段代码在你的Angular模块定义之后执行就行。比如：

// 先定义你的Angular模块（确保依赖了ui-select）
var app = angular.module('yourApp', ['ui.select']);

// 注册自定义过滤器
app.filter('myCustomeFilter', function() { 
    return function(items, props) { 
        var out = []; 
        if (angular.isArray(items)) { 
            items.forEach(function(item) { 
                var keys = Object.keys(props); 
                var prop = keys[0]; 
                var text = props[prop].toLowerCase(); 
                if (item[prop].toString().toLowerCase().indexOf(text) === 0) { 
                   out.push(item);
                }
              });
        } else { 
             out = items;
        } 
        return out;   
    }; 
});

二、修改HTML中的ui-select代码 #

把原来的默认filter替换成你的自定义过滤器就行，注意你的过滤器需要传入一个指定搜索字段的对象（对应过滤器里的props参数）。比如你要根据地区的label字段做前缀匹配，代码改成这样：

<ui-select multiple ng-model="criteria.regionIds" theme="select2" style="width: 100%;border:0!important;">
     <ui-select-match placeholder="Select regions...">{{$item.label}}</ui-select-match>
     <!-- 替换默认filter为自定义过滤器，传入{label: $select.search}指定搜索字段 -->
     <ui-select-choices repeat="region.code as region in regions | myCustomeFilter: {label: $select.search}">
         <div ng-bind-html="region.label | highlight: $select.search"></div>
     </ui-select-choices> 
</ui-select>

如果需要根据code字段搜索，把{label: $select.search}改成{code: $select.search}即可。

三、控制器无需额外修改 #

你的summaryReportsResultsCtrl控制器不用改任何代码——自定义过滤器是全局注册的，只要模块依赖正确，在HTML里就能直接用。如果之后需要在控制器里手动调用这个过滤器，可以注入$filter服务来实现：

function summaryReportsResultsCtrl($scope, $state, $filter, $modal, growl, summaryreportService, paginationConfig, currentUser) { 
    // 示例：在控制器内调用自定义过滤器
    var filteredRegions = $filter('myCustomeFilter')($scope.regions, {label: '北京'});
}

内容的提问来源于stack exchange，提问作者illogically13