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 } 
    ]
  };

过滤器实际上无法通过rating属性正常工作：它只返回一个选定属性的更多内容：

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

如何在此处修复过滤器？这是一个傻瓜：http://plnkr.co/edit/vAebEb?p=preview

Answer 1

现在您将filterItem.rating设置为过滤器，因此您需要将字符串设置为过滤器。来自docs（https://docs.angularjs.org/api/ng/filter/filter）：

该字符串用于匹配数组的内容。所有字符串或对象，其数组中的字符串属性与此匹配字符串将被返回。这也适用于嵌套对象属性。可以通过在字符串前加上来否定谓词！

这样做是将数组中的任何属性与值filterItem.rating匹配;所以产品名称中的数字也匹配。

由于您希望过滤器仅适用于rating属性，因此您需要设置如下对象：

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

现在可以正常过滤，但Show All无法正常工作，因为filterItem.rating在显示全部时未定义。由于我们不希望在选择Show All时应用过滤器，因此您可以先检查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}">

希望这有帮助。

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

2 个答案: