Angularjs使用父数据的单键多值进行筛选

Angularjs Filter with single key multiple values of parent data

本文关键字:筛选 单键多 数据 Angularjs      更新时间:2023-09-26

我是Angularjs的新手。我们可以按多个键值进行筛选,但这里我需要按单个值进行筛选,但是我的父数据包含多个值。像

控制器内:

$scope.movies = [{name:'aa', criteria:'SECURITY TYPE:Stocks|GEOGRAPHY:US'},
                  {name:'bb', criteria:'TRADING STRATEGY:Monthly|YIELD:Mid,Blend'},
                  {name:'cc', criteria:'SECURITY TYPE:Stocks|YIELD:Mid,Blend'},
                  {name:'dd', criteria:'MARKETCAPITALIZATION:Mega|VOLATILITY:Low'}];

$scope.filterByProperties = function (data) {
 return $scope.filter[data.criteria] || noSubFilter($scope.filter);
};
function noSubFilter(subFilterObj) {
        for (var key in subFilterObj) {
            if (subFilterObj[key]) return false;
        }
        return true;
    }

视图文件:

<label>SECURITY TYPE</label>
<input type="checkbox" ng-model="filter['Stocks']"> Stocks
<label>Yield</label>
<input type="checkbox" ng-model="filter['Mid']"> Mid

但是,作为包含多个值的data.criteria字段,我将如何从复选框中筛选它们?

使用自定义过滤器过滤掉数据。

<label>SECURITY TYPE</label>
  <input type="checkbox" ng-model="criteria.stocks"> Stocks</input>
  <label>Yield</label>
  <input type="checkbox" ng-model="criteria.mids"> Mid</input>
  <ul>
    <li ng-repeat="m in movies | typeFilter: criteria">
      {{m.name}} {{m.criteria}}
    </li>

添加过滤器

.filter('typeFilter', function($filter) {
   return function(input, criteria) {
console.log(criteria);
console.log(input);
var data = input;
if(criteria && !criteria.mids && !criteria.stocks){
  return input;
}
if(criteria.stocks){
  console.log(data);
    data = $filter('filter')( data, {criteria:'Stocks'} );
    console.log(data);
}
if(criteria.mids){
  console.log(data);
  data = $filter('filter')(data, {criteria:'Mid'} );
  console.log(data);
}
return data;}});

我在这里创建了一个工作示例http://codepen.io/mkl/pen/wGOKJo