Фильтр по массиву, нажав на список категорий

Глядя на длинный массив продуктов с разрезом категорий вверху. При нажатии они будут отображаться только в пределах этой категории.Фильтр по массиву, нажав на список категорий

Может ли кто-нибудь помочь с настройкой этого кода на основе простого примера фильтрации с помощью кнопок.

Так что, когда кнопка фрукты кликали только фруктовые продукты отображаются, когда Nuts кнопка, только орехи ..

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

источник

2016-06-06 me9867

не ваша скрипка работает нормально? – Chinni

Тот же вопрос. Почему бы вам не добавить несколько кнопок за пределы 'ng-repeat' и использовать ту же логику? – AranS

Будет ли это что-то вроде этого?

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

остальное остается прежним ...

источник

2016-06-06 14:28:57

Фильтр по массиву, нажав на список категорий

ответ

Смежные вопросы