使用下拉菜单过滤数据? [英] filter data using dropdown?

问题描述

我有一个对象数组，它们只是项目.我还有一个下拉菜单，我想用它来允许用户按价格或评级进行过滤，但是在页面加载时不应该进行过滤.

I have an array of objects which are just items. I also have a dropdown which I would like to use to allow the user to filter by price or rating however on page load there should be no filtering.

如何将项目数据映射到基于当前选择选项的过滤器?

How do I map item data to filter based on the current select option?

我有一个 plunkr 可以开始使用:LINK

I have a plunkr to get started: LINK

推荐答案

首先，您的选择值不明确.它们包含可以过滤和排序条目的值 - 将两者分开，因为它们是两个不同的功能.

First and foremost, your select values are ambiguous. They contain values that can filter AND sort the entries - Separate the two since they are two different functionality.

接下来，您需要定义一个自定义过滤器，它将根据所选的评级过滤数据.为此，您可以使用评级"属性增强过滤条件，以将所选评级与评级值相关联.

Next, you need to define a custom Filter which will filter the data based on the rating selected. For this, you enhance the filtering criteria with the "Rating" property to associate the rating selected with a rating value.

最后，将排序与谓词和反向值相关联 - 谓词确定要确定排序的属性/列(在您的情况下为价格)，而反向确定排序的升序/降序性质.

Finally, associate the sorting with a predicate and a reverse value - the predicate determines the property / column to determine for the sort (price in your case) while the reverse determines the ascending / descending nature of the sort.

可以在此处找到完整代码 - http://plnkr.co/edit/n7TebC?p=预览

The entire code can be found here - http://plnkr.co/edit/n7TebC?p=preview

我已经更新了 plunkr 并引入了评论，所以如果您不理解代码，请告诉我.

I have updated the plunkr and introduced comments so let me know if you do not understand a code.

这篇关于使用下拉菜单过滤数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！