编写允许切换的基本 Angular 过滤器答案

【问题标题】：Writing basic Angular filters that allow toggling编写允许切换的基本 Angular 过滤器
【发布时间】：2014-03-30 17:48:27
【问题描述】：

我正在学习 Angular 和 JS，但我无法想出一个过滤功能，该功能允许通过按钮过滤开/关（切换）对象。

所以给定类似ng-repeat="o in objects | filter:objectsFilter"

对象的样子：

{'id':1, 'name':'foo', 'property1':'bar', 'property2': 23, ...'}

我们有一些类似于复选框的按钮来过滤我们的结果集：

<button ng-click="objectsFilter('property1', '=', 'bar')">Bar</button>
<button ng-click="objectsFilter('property1', '=', 'baz')">Baz</button>
<button ng-click="objectsFilter('property2', '>', 22)">Greater than 22</button>
<button ng-click="objectsFilter()">Clear All</button>
...

在哪里objectsFilter([property], [comparison operator], [value])。我不知道这是否是正确的方法（我从 Laravel 的查询构建器中采用了它）。请随时更改它以适应解决方案。

问题

如何使过滤器可切换和可堆叠？

Toggleable：如果相同的属性、比较运算符和值已被过滤，请移除该过滤器。

可堆叠：不言自明，一次允许多个过滤器。

到目前为止，我得到的只是一个静态过滤器：

 $scope.objectsFilter = function(object)
    {
        return object.property1 == 'bar'; // filters for property1: bar only.
    };

我不知道我应该采取什么方法（除了一堆 if 语句），但我确实感觉使用 Angular 比看起来更容易。有什么帮助吗？

【问题讨论】：

标签： javascript angularjs filtering

【解决方案1】：

我猜你想要的是这样的：

HTML：

<body ng-controller="myController">
    <div ng-repeat="o in objects | objectsFilter:'value':'>':30">{{o.value}}</div>
</body>

JS：

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  console.log('app loaded');
  $scope.objects = [{value:10},{value:20},{value:30},{value:40},{value:50},{value:60},{value:70}];
});

app.filter('objectsFilter', function() {
  return function(object, property, comparator, expected) {
    var filteredObject = [],
        filtered = false;
    for (var i = 0; i < object.length; i++) {
    switch(comparator) {
      case '=':
        filtered = !(object[i][property] === expected);
        break;
      case '<':
        filtered = !(object[i][property] < expected);
        break;
      case '>':
        filtered = !(object[i][property] > expected);
        break;
      default:
        filtered = false;
    }
      if (!filtered) {
        filteredObject.push(object[i]);
      }
    }
    return filteredObject;
  };
});

工作jsfiddle

【讨论】：