4

我有以下情况：指标列表，每个指标都有属性名称、描述、基本和差异。

$scope.indicators = [
  { name: 'indicator1' , description: 'blah1', essential: true, differential: false },
  { name: 'indicator2' , description: 'blah2', essential: false, differential: true },
  { name: 'indicator3' , description: 'blah3', essential: true, differential: true },
  { name: 'indicator4' , description: 'blah4', essential: false, differential: false }    
]

我希望能够通过选择以下组合进行过滤： “全部”、“基本”、“差异”、“基本和差异”、“既不是基本也不是差异”

我尝试在与ng-repeat关联的选择中使用ng-model | filter，但这破坏了分页。

我想不出使用st-search指令的方法，因为我正在过滤两个属性的组合。

有人有建议吗？

使用示例代码跟随 plunker：http: //plnkr.co/edit/t9kwNUjyJ15CbLFFbnHb

谢谢！！

4

2 回答 2

4

搜索是累积的，因此如果您search使用多个调用控制器 api，您将能够添加谓词。

只要确保在值更改时重置 sortPredicate 对象。

这个 plunker展示了如何根据您的要求编写插件（尽管我不明白all在这种情况下会是什么

.directive('customSearch',function(){
return {
  restrict:'E',
  require:'^stTable',
  templateUrl:'template.html',
  scope:true,
  link:function(scope, element, attr, ctrl){
     var tableState=ctrl.tableState();
     scope.$watch('filterValue',function(value){
       if(value){
         //reset
         tableState.search.predicateObject ={};

         if(value==='essential'){
           ctrl.search('true', 'essential');
         } else if(value === 'differential'){
           ctrl.search('true', 'differential')
         } else if(value === 'both'){
           ctrl.search('true','essential');
           ctrl.search('true', 'differential');
         } else if(value === 'neither'){
            ctrl.search('false','essential');
            ctrl.search('false', 'differential');
         }
       }
     })
  }
};});
于 2014-09-24T08:13:20.643 回答
0

我就是这样做的。

在您的控制器中定义一个包含可能选项的数组和每个选项的过滤器，如下所示：

     $scope.options = [
        {value:'All', filter:{}},
        {value:'Essential', filter:{essential:true}},
        {value:'Differential', filter:{differential:true}},
        {value:'Essential and Differential', filter:{differential:true, essential:true}},
        {value:'Neither Essential nor Differential', filter:{differential:false, essential:false}}
     ];

然后在您的 html 中使用此数组声明您的选择，如下所示：

        <select ng-model='diffEssFilter' ng-options='option.value for option in options'>
        </select>

然后在您ng-repeat使用将存储在中的过滤器diffEssFilter，如下所示：

<tr ng-repeat="indicator in indicators | filter:diffEssFilter.filter">

而已。

工作示例

于 2014-09-19T02:08:54.963 回答