angularjs – 点击类别链接时过滤项目列表

我有一个包含“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”，显示与链接类别的警报。我有“过滤器：？”我猜这个过滤器的价值已经到了。 Ths是控制器功能：

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

任何想法如何进行？谢谢！

您可以在控制器的范围内创建一个要过滤的对象，并将其传递给ng-repeat中的过滤器表达式

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

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

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

所以现在我们有一个附加到作用域的过滤器对象。如果它得到一个类别的关键字，则过滤器表达式将根据他们是否具有类别的键并且匹配来自动过滤对象。

有关更多详细信息，请查看filter docs的“参数”部分。

所以你的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>

Here’s a quick fiddle of this in action。

原文地址：https://www.jb51.cc/angularjs/144477.html