bambamboole bambamboole - 5 months ago 134
AngularJS Question

angular filter with ng-click + input

how can I get a filter with ng-click out of an ul as second filter for an ngtable?

<ul class="artGroups">
<li class="" ng-repeat="artGroup in artGroups">
<a href="#" ng-click="">{{artGroup.artGroupName}}</a>
</li>
</ul>


Here's a plnkr: http://plnkr.co/edit/Amdx2BzEWQWVYmRAgTMw

Answer

You can set a function on the main controller to change a value when an artGroup is selected:

$scope.selectedGroup = '';
$scope.setGroup = function(group) {
    $scope.selectedGroup = group;
}

And wire up the ng-click directive:

<a href="#" ng-click="setGroup(artGroup.artGroupId)">{{artGroup.artGroupName}}</a>

Then you can set up another custom filter on the tr, using that selectedGroup variable on the scope:

<tr ng-repeat="article in articles | filter:searchText | isArtGroup:selectedGroup">

Then create the custom filter to filter the articles based on whether or not they fall into that artGroupId:

app.filter('isArtGroup', function(){
  return function(values, groupId) {
    if(!groupId) {
      // initially don't filter
      return values;
    }
    // filter when we have a selected groupId
    return values.filter(function(value){
      return value.artGroupId === groupId;
    })
  }
})

Here's all of that working together in Plunker