通过单击类别列表来过滤数组

Question

希望拥有一长串产品，并在顶部选择类别。单击时，它们将仅显示在该类别中。

任何人都可以根据一个简单的示例帮助调整此代码以通过单击按钮进行过滤。

所以当点击水果按钮时只显示水果产品，当点击坚果按钮时，只显示坚果..

        <html ng-app="app">
            <body ng-controller="main">
            <div>Fruit / Nut</div><br>
                <a ng-click="filters.category = ''">clear filter</a>
            <div ng-repeat="link in links | filter:filters">

                    <strong>{{link.name}}</strong>
                    <a ng-click="filters.category = link.category">{{link.category}}</a>
                </div>
            </body>
        </html>

        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'}
            ];
        });

http://jsfiddle.net/oxbzuz4v/

Answer 1

会是这样吗？

<html ng-app="app">
<body ng-controller="main">
<div>
<button ng-click="filters.category ='Fruit'">Fruit</button>
<button ng-click="filters.category ='Nut'">Nut</button>
<button ng-click="filters.category =''">Clear filter</button>
</div><br>
   <div ng-repeat="link in links | filter:filters">
        <strong>{{link.name}}</strong>
    </div>
</body>

其余保持不变... Demo

通过单击类别列表来过滤数组

Filter array by clicking on categories list

javascript

angularjs

angular-filters