Filterliste von Artikeln beim Klicken auf Kategorie-Link

Question

Ich habe eine Liste von Elementen mit "ng-repeat". Jeder Artikel enthält ein div mit einem Linktitel und einer Linkkategorie. Wenn ich auf eine Kategorie klicke, möchte ich die Liste der Elemente filtern, so dass nur die Elemente angezeigt werden, die zu dieser Kategorie gehören. Wie kann ich das erreichen?

Bisher habe ich eine Liste der Elemente:

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

Und in der Steuerung ich eine Funktion „filterCategory“ haben, die eine Benachrichtigung mit dem Link Kategorie zeigt. Und ich habe den "Filter:?" wo ich denke der Wert des Filters muss kommen. Ths ist die Kontrollerfunktion:

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

Irgendeine Idee, wie man fortfährt? Vielen Dank!

Answer 1

Sie können ein Objekt auf dem Controller des Oszilloskops zur Filterung bestimmt erstellen und an den filter Ausdruck in 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'} 
    ]; 
}); 

haben wir ein filters Objekt auf den Umfang angebracht So, jetzt passieren. Wenn es einen Schlüssel von category erhält, wird der Ausdruck filter die Objekte automatisch filtern, je nachdem, ob sie einen Schlüssel von category haben und nicht übereinstimmen.

Weitere Details finden Sie im Abschnitt "Parameter" der filter docs.

So könnte Ihre HTML wie folgt aussehen:

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