gpt4 book ai didi

javascript - 编写允许切换的基本 Angular 过滤器

转载 作者:行者123 更新时间:2023-11-28 08:29:09 25 4
gpt4 key购买 nike

我正在学习 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([属性], [比较运算符], [值])。我不知道这是否是正确的方法(我从 Laravel 的查询构建器中采用了它)。请随意更改它以适应解决方案。

问题

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

可切换:如果已过滤相同的属性、比较运算符和值,请删除该过滤器。

可堆叠:非常不言自明,允许同时使用多个过滤器。

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

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

我不知道应该采取什么方法(除了一堆 if 语句),但我确实有一种感觉,使用 Angular 它比看起来更容易。有什么帮助吗?

最佳答案

我猜你想要的是这样的:

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

关于javascript - 编写允许切换的基本 Angular 过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22066137/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com