filter list of items when clicking category link

Question

I have a list of items with \"ng-repeat\". Each item contains a div with a link title and link category. When clicking on a category, I want to filter the list of items, so

Answer 1

You can create an object on your controller's scope intended for filtering and pass it to the filter expression 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'}
    ];
});

So now we have a filters object attached to the scope. If it gets a key of category, the filter expression will automatically filter the objects according to whether or not they have a key of category and it matches.

For more details, look at the "Parameters" section of the filter docs.

So your HTML could look like:

    
{{link.title}}
    
{{ link.category }}

Here's a quick fiddle of this in action.