Question

我正在学习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：如果已经过滤了相同的属性，比较运算符和值，请删除该过滤器。

Stackable：非常不言自明，一次允许多个过滤器。

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

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

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

Answer 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

编写允许切换的基本角度过滤器

1 个答案: