カテゴリリンクをクリックすると、項目のフィルタリストが表示されます

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」を持つコントローラで

。そして、私は "フィルタ：？"ここで私はフィルタの値が来ると思います。 Thsはコントローラの機能です：

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

どのように進めていいですか？ありがとう！

Answer 1

あなたは、フィルタリングのために意図され、コントローラのスコープ上のオブジェクトを作成し、だから今我々はスコープに添付filtersオブジェクトを持って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'} 
    ]; 
}); 

にfilter表現にそれを渡すことができます。 categoryのキーを取得すると、filterという式は、キーがcategoryであるかどうかに応じてオブジェクトを自動的にフィルタリングし、一致します。

詳細については、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。

Answer 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>