श्रेणी लिंक पर क्लिक करते समय आइटम की फ़िल्टर सूची

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

आप को छानने के लिए लक्षित अपने नियंत्रक की गुंजाइश पर एक वस्तु बना सकते हैं और 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 की कुंजी है या नहीं।

अधिक जानकारी के लिए, filter docs के "पैरामीटर्स" अनुभाग को देखें।

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

तो अपने HTML की तरह लग सकता है।

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>