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

通过单击类别列表筛选数组

1 个答案: