单击类别链接时过滤项目列表

Question

我有一个带有“ ng-
repeat”的项目列表。每个项目都包含一个带有链接标题和链接类别的div。单击类别时，我要过滤项目列表，以便仅显示属于该类别的项目。我该如何实现？

到目前为止，我有一个项目列表：

  <div class="link_line" ng-repeat="link in links | filter: ? ">
    <div class="title"><a href="{{link.url}}" target="_blank">{{link.title}}</a></div>
    <div class="category_label" ng-click="filterCategory(link)>{{ link.category }}</div>
  </div>

在控制器中，我有一个函数“ filterCategory”，其中显示了带有链接类别的警报。而且我有“过滤器：？”
我猜想过滤器的值必须到哪里。这是控制器功能：

  $scope.filterCategory = (link) ->
    alert(link.category)

知道如何进行吗？谢谢！

Answer 1

您可以创建你的控制器的范围对象用于过滤并把它传递到filter表达ng-repeat

var app = angular.module('app', []);

app.controller('main', function($scope) {
    $scope.filters = { };

    $scope.links = [
        {name: 'Apple', category: 'Fruit'},
        {name: 'Pear', category: 'Fruit'},
        {name: 'Almond', category: 'Nut'},
        {name: 'Mango', category: 'Fruit'},
        {name: 'Cashew', category: 'Nut'}
    ];
});

所以现在我们有一个filters对象附加到范围。如果它的键为category，则filter表达式将根据对象是否具有category和匹配来自动过滤对象。

有关更多详细信息，请参阅过滤器文档的“参数”部分。

因此，您的HTML可能如下所示：

<div class="link_line" ng-repeat="link in links | filter:filters">
    <div class="title"><a href="{{link.url}}" target="_blank">{{link.title}}</a></div>
    <div class="category_label" ng-click="filters.category = link.category">{{ link.category }}</div>
</div>

这是实际操作的小提琴。