如何通过下拉列表过滤列表？

Question

我正在尝试通过下拉列表设置的属性过滤列表：

<select ng-model="filterItem" ng-options="item.name for item in filterOptions.stores">
</select>

这是下拉列表的数据：

$scope.filterOptions = {
    stores: [
      {id : 2, name : 'Show All', rating: 6 },
            {id : 3, name : 'Rating 5', rating: 5 },
      {id : 4, name : 'Rating 4', rating: 4 },
      {id : 5, name : 'Rating 3', rating: 3 },
      {id : 6, name : 'Rating 2', rating: 2 },
      {id : 7, name : 'Rating 1', rating: 1 } 
    ]
  };

通过评级属性，过滤器实际上无法正常工作：它 returns 比仅选择属性:

<li data-ng-repeat="item in data | filter:filterItem.rating" >
        Name: {{item.name}} Price: {{item.price}} Rating: {{item.rating}}
</li>

如何修复这里的过滤器？这是一个 plunkr:http://plnkr.co/edit/vAebEb?p=preview

Answer 1

现在您将 filterItem.rating 设置为过滤器，因此您将字符串设置为过滤器。来自文档 (https://docs.angularjs.org/api/ng/filter/filter):

The string is used for matching against the contents of the array. All strings or objects with string properties in array that match this string will be returned. This also applies to nested object properties. The predicate can be negated by prefixing the string with !.

这是在用值 filterItem.rating 匹配数组中的任何属性；所以产品名称中带有数字的产品也被匹配。

由于您希望过滤器仅适用于评分属性，因此您需要像这样设置一个对象：

<li data-ng-repeat="item in data | filter:{rating:filterItem.rating}" >

现在可以正确过滤，但显示全部无法正常工作，因为 filterItem.rating 在显示全部时未定义。由于我们不希望在选择显示全部时应用过滤器，因此您可以先检查 filterItem.rating 属性：

<li data-ng-repeat="item in data | filter:filterItem.rating && {rating:filterItem.rating}" >

我已经在此处更新了您的 Plunkr：http://plnkr.co/edit/q5Ns8c6HN1eIGZANlI4s?p=preview

Answer 2

您需要进行一些更改：

在您的 $scope.filterOptions.stores 对象中：删除 Show All 选项的评级，例如：

{id : 2, name : 'Show All'},

在您使用过滤器的 html 中：

<li data-ng-repeat="item in data | filter:filterItem.rating && {rating:filterItem.rating}">

希望对您有所帮助。

如何通过下拉列表过滤列表？

how to filter a list through a dropdown?

filter

angularjs

angularjs-ng-repeat

angularjs-filter