Question

我正在使用非常好的Smart-table库来显示我的数据。我已经制作了一个自定义过滤器指令，允许我为按钮分配过滤器，以便用户可以轻松按行状态进行过滤（即＆＃39;新＆＃39;，＆＃39;完成＆＃39;＆＃39;失败＆＃39;等）。这很好用，但我希望能够复合过滤器，以便我可以按州列中包含两个值之一的行进行过滤（例如＆＃39;新＆＃39;＆＃39;失败＆＃39;）

我的自定义过滤器看起来像....

app.directive('stCustomFilter', function() {
    return {
        restrict: 'A',
        require: '^stTable',
        scope: true,
        link: function(scope, element, attr, ctrl) {
            var tableState = ctrl.tableState();
            var searchText = attr.stCustomFilter;
            var searchColumn = attr.stCustomFilterColumn;

            element.on('click', function(data) {
                tableState.search.predicateObject = {};
                ctrl.search(searchText, searchColumn);
                //console.log(tableState);
                scope.$apply();
            })
        }
    };
});

并在st-table的内部使用如下......

<div class="btn-group  btn-group-sm">
    <button st-custom-filter="" st-custom-filter-column="status">All</button>
    <button st-custom-filter="New" st-custom-filter-column="status">New</button>
    <button st-custom-filter="Done" st-custom-filter-column="status">Done</button>
    <button st-custom-filter="Failed" st-custom-filter-column="status">Failed</button>
</div>

理想情况下，我希望能够使用类似＆＃34;新的||失败的＆＃34;通过稍微修改指令在st-custom-filter里面，但我觉得答案可能在于编写一些涉及st-pipe方法的更复杂的东西。

有人可以提出一两个建议吗？非常感谢。

Answer 1

对于默认角度过滤器过滤器不支持的OR过滤器，您必须设置自定义过滤器并告诉智能表使用此过滤器代替默认过滤器

angular.filter('myCustomFilter',function(){
return function(array, predicteObject){
//the predicate object is forwarded by smart table whenever a directive call the search method.. for example :{ myProp1:'myInput1',myProp2:'myInput2
//process the array with your OR logic
}})

然后告诉智能表使用您的自定义过滤器代替默认过滤器

<table st-table="myCollection" st-set-filter="myCustomFilter"></table>

Answer 2

scope.displayClients  = [].concat(scope.clients);
scope.predicates = ['col1', 'col2', 'col3'];
scope.selectedPredicate = scope.predicates[0];

app.filter('myStrictFilter', function($filter){
 return function(input, predicate){
    return $filter('filter')(input, predicate, false);  //false -if contains     string, true if matches string
}})




scope.displayClients  = [].concat(scope.clients);
scope.predicates = ['col1', 'col2', 'col3'];
scope.selectedPredicate = scope.predicates[0];

app.filter('myStrictFilter', function($filter){
    return function(input, predicate){
        return $filter('filter')(input, predicate, false); // true for exact match 
}})

Angular - 智能表 - 过滤器中的OR

2 个答案: