Фильтровать данные по функции щелчка в AngularJS

Question

У меня есть данные о некоторых байках на моей странице HTML. Я должен отфильтровать эти данные с помощью функции щелчка. Я использовал фильтр в области текстового поля, но мне нужна такая же функциональность с помощью функции щелчка.

Итак, как я могу связать фильтр с функцией щелчка?

http://jsfiddle.net/3G7Kd/114/

<div ng-app='app' class="filters_ct"> 
    <ul class="nav" ng-controller="selectFilter"> 
     <li ng-repeat="filter in filters" ng-click="select($index)" ng-class="{sel: $index == selected}"> 
      <span class="filters_ct_status"></span> 
      {{filter.name}} 

      <ul class="subul" ng-if=filter.lists.length> 
       <li ng-repeat="list in filter.lists" ng-click=" $event.stopPropagation()"> 
        <input type="checkbox"> {{list}} 
       </li> 
      </ul> 
     </li> 
    </ul> 
    <input type="text" ng-model="search"> 
    <div ng-controller="listctrl"> 
     <div class="list" ng-repeat="list in lists | filter:{brand:search}"> 
      {{list.brand}} 
      {{list.year}} 
     </div> 

     </div> 

</div> 

Угловая

var app = angular.module('app', []); 

app.controller('selectFilter', function($scope) { 

    $scope.filters = [ 
      { 
       "name": "brand", 
       'lists': ['yamaha','ducati','KTM','honda'] 
      }, 
      { 
       'name': "year", 
       'lists': [2012,2014,2015] 
      } 
     ]; 
    $scope.selected = 0; 

    $scope.select= function(index) { 
     if ($scope.selected === index) 
      $scope.selected = null 
     else 
      $scope.selected = index; 
    }; 
}); 


app.controller('listctrl', function($scope) { 

    $scope.lists = [ 
      { 
       "brand": "ducati", 
       'year': 2012 
      }, 
      { 
       'brand': "honda", 
       'year': 2014 
      }, 
      { 
       'brand': "yamaha", 
       'year': 2015 
      }, 
      { 
       'brand': "KTM", 
       'year': 2012 
      } 
     ]; 

}); 

Answer 1

Вы уже знали, как использовать фильтр, когда данный объект внутри парциальное. Я переместил один из ваших контроллеров, так что у вас есть внешний и внутренний контроллер.

<div ng-app='app'ng-controller="MainCtrl as mainCtrl"> 

    <div ng-controller="listCtrl"> 

     <!-- your filter object is now accessible here --> 
    </div> 

</div> 

я добавил переменную возможности для внешнего контроллера $scope.activeFilters (заполнение этого вы должны быть в состоянии сделать самостоятельно, увидеть plunker на одно из возможных решений.

Этот объект теперь изменяется при нажатии на . флажки Как $scope.activeFilters теперь доступен из внутреннего контроллера мы можем передать его в фильтр, как и раньше:

<div class="list" ng-repeat="list in lists | filter:activeFilters"> 
    {{list.brand}} 
    {{list.year}} 
</div> 

Обратите внимание, что есть, вероятно, более хорошие решения (используя флажок с моделью среди других вещей).

Работа plunker: http://jsfiddle.net/ywfrbgoq/