编写允许切换的基本 Angular 过滤器
Posted
技术标签:
【中文标题】编写允许切换的基本 Angular 过滤器【英文标题】：Writing basic Angular filters that allow toggling 【发布时间】：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 比看起来更容易。有什么帮助吗？
【问题讨论】：
【参考方案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
【讨论】：
以上是关于编写允许切换的基本 Angular 过滤器的主要内容，如果未能解决你的问题，请参考以下文章