单击类别链接时筛选项目列表

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>

这是一个很快的小提琴.