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

【问题标题】：filter list of items when clicking category link单击类别链接时过滤项目列表
【发布时间】：2013-02-14 19:17:26
【问题描述】：

我有一个带有“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)

知道如何进行吗？谢谢！

【问题讨论】：

标签： angularjs

【解决方案1】：

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

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的key，filter表达式会根据对象是否有category的key并匹配，自动过滤对象。

有关更多详细信息，请查看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.

【讨论】：

我需要类似的东西，你的回答对我帮助很大！我不得不对其进行更改，使其支持每个项目的多个类别，这就是我想出的：jsfiddle.net/xffe9zwp
如果 $scope.links 有 int 值，我如何过滤介于两者之间的值？例如："5>= && 10

【解决方案2】：

angular.module('app',[])
  .controller('MainController', function($scope) { 
  $scope.team =[
    {cat_id:1,team: 'alpha'},
    {cat_id:2,team: 'beta'},
    {cat_id:3,team: 'gamma'}
               ];
  
    $scope.players = [
      {name: 'Gene',cat_id : 1},
      {name: 'George',cat_id : 2},
      {name: 'Steve',cat_id : 3},
      {name: 'Pzula',cat_id : 2},
      {name: 'shrikant',cat_id : 3}
    ];
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController"> 
    
<ul ng-repeat="(key, value) in team ">
{{value.team}}
  
 <li ng-repeat="p in players " ng-if="p.cat_id==value.cat_id">
   {{ p.name }}
 </li>
  
</ul>
</div>

【讨论】：