过滤($ filter)匹配对象列表中的值,排除不必要的属性

时间:2015-09-07 15:52:31

标签: javascript angularjs

我尝试通过定义自定义过滤器st-set-filter="myCustomFilter"来修改Smart Table全局搜索的行为。这是

.filter('myCustomFilter', ['$filter', function($filter){
    return function(input, predicate){
        return $filter('filter')(input, predicate, false);
    }
}])

智能表输入是对象列表,其属性是列的名称。 我想只过滤表格列的给定子集

如果我在输入 foo 后我登录{。{1}},我会看到predicate之类的内容。这意味着过滤器正在寻找与列表中对象的任何属性(即列)匹配的匹配项。

有没有办法根据我的需求正确定义谓词(例如排除不必要的属性?

1 个答案:

答案 0 :(得分:1)

将这个排除逻辑放在过滤谓词中。您可以通过其函数名称将该谓词直接传递给HTML。

谓词函数是一个接受一些参数(通常是对象)并返回true或false值的函数。通常会在阵列的每个元素上单独评估此谓词。在$filter的情况下,谓词确定是包含还是排除该元素。这意味着您只需编写该函数即可正确包含正确的元素,同时排除错误的元素。

documentation for angular's $filter开始,谓词有这个签名:

  

function(value, index, array):谓词函数可用于编写任意过滤器。为数组的每个元素调用该函数,其中元素,索引和整个数组本身作为参数。

您不必使用所有输入,并且通常您只需要第一个参数(元素本身)。您的过滤谓词可能如下所示:

$scope.customFilter = function(item, index, array) {
  var excluded = item.testResult == 'fail';
  //.contains() logic for a search filter 
  var included = item.name.toLowerCase().indexOf($scope.filterData.name.toLowerCase()) > -1;

  return included && !excluded;
};

然后将谓词函数本身传递给HTML中的过滤器:

<div ng-repeat="obj in data | filter:customFilter">
     Do stuff with the filtered data
</div>

我已经链接了a demo on plnkr,它展示了谓词如何与表单的其他部分进行交互以包含某些元素同时排除其他元素的基本概念。

关于智能表。我不确定您的智能表期望什么,但如果只是想要一个$filter对象,那么您应该能够利用predicate的{​​{1}}参数。只需将您的谓词函数(例如上面显示的函数)传递到$filter的自定义过滤器中即可。我从Todd Motto's page了解了这种语法(第3节:带参数的重复过滤器)。

过滤器定义

filterName:arg1

HTML

//same as your filter, but named a bit better
.filter('appLevelFilter', ['$filter', function($filter){
    return function(input, predicate){
        return $filter('filter')(input, predicate, false);
    }
}])