0

I'm following this great post: How to filter a list in AngularJS using several links

Now I'd like to display data filtered by multiple parameters on click.

html

<div ng-app>
  <span ng-click="myFilter = {type: 1}">Type 1</span> | 
  <span ng-click="myFilter = {type: 2}">Type 2</span> |
  <span ng-click="myFilter = {type: 3}">Type 3</span> |
  <!-- multiple filter - not working -->
  <span ng-click="myFilter = [{type: 1}, {type:3}]">Types 1 & 3</span> |
  <span ng-click="myFilter = null">No filter</span>
  <ul ng-controller="Test">
    <li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li>
  </ul>
</div>

js

function Test($scope) {
  $scope.persons = [{type: 1, name: 'Caio'}, {type:2, name: 'Ary'}, {type:1, name: 'Camila'}, , {type:3, name: 'Daniel'}];
}

The multiple parameters filter example doesn't work that way. Is there a simple and generic way to achieve that, without coding a custom filter ?

I updated the jsfiddle: http://jsfiddle.net/pkxPa/89/

Any idea ? Maybe there is a better way like using ng-show (like in this post: Show hidden div on ng-click within ng-repeat) ?

Thanks

Community
  • 1
  • 1
Fred
  • 639
  • 4
  • 14
  • 27
  • By the way, I tried `Types 1 & 3` and it still does't work... – Fred Feb 23 '14 at 23:01
  • 1
    Short answer is no, your best bet is to write a function that will filter based on that specific logic in your controller and set your myFilter variable to that function. See http://docs.angularjs.org/api/ng/filter/filter for more details – link64 Feb 24 '14 at 03:44

1 Answers1

8

I've updated the plunkr (http://jsfiddle.net/pkxPa/91/) to fix a few minor errors and demonstrate how you can do it with a custom function. Unfortunately, I dont think there is a way to do it inline as you tried.

Moved the controller decleration to top most div

<div ng-app ng-controller="Test">
  <span ng-click="myFilter = {type: 1}">Type 1</span> | 
  <span ng-click="myFilter = {type: 2}">Type 2</span> |
  <span ng-click="myFilter = {type: 3}">Type 3</span> |
  <!-- multiple filter - not working -->
  <span ng-click="myFilter = myFunction">Types 1 & 3</span> |
  <span ng-click="myFilter = null">No filter</span>
  <ul >
    <li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li>
  </ul>
</div>

Removed duplicate comma from your persons array that was resulting in an undefined object and added a custom filter

    function Test($scope) {
          $scope.persons = [{type: 1, name: 'Caio'}, {type:2, name: 'Ary'}, 
{type:1, name: 'Camila'}, {type:3, name: 'Daniel'}];
            $scope.myFunction = function(val) {

            return (val.type != 2);
            };
        }

See the AngularJS documentation here for more info http://docs.angularjs.org/api/ng/filter/filter

link64
  • 1,944
  • 1
  • 26
  • 41
  • 1
    Thanks link64, that's quite clean and simple, exactly what I was searching for ! great stuff !! – Fred Feb 24 '14 at 21:48
  • By the way, could you just explain me quickly what the val parameter refers to here ? `function(val) { return (val.type != 2); };` Thanks ! – Fred Feb 26 '14 at 20:55
  • Additional question: can I add parameters to `myFunction()` ? If so, how can I add them in html ? `` ? – Fred Feb 26 '14 at 21:12
  • And in that case, how can I get the equivalent of the `val` parameter from my first comment ? – Fred Feb 26 '14 at 21:19
  • 1
    the val parameter is the object that is passed in from the persons array. The function is called for each item in the array. For your second question regarding additional parameters, see this question: http://stackoverflow.com/questions/16227325/how-do-i-call-an-angular-js-filter-with-multiple-arguments – link64 Feb 26 '14 at 22:54
  • One last question regarding this topic (I'm stuck, sorry...): I'd like to execute several instructions when clicking on the text and not only filter the object. It works that way: `Types 1 & 3` and `$scope.myFunction = function() { $scope.myFilter = {type: 2}; alert("done"); };` But how can I manage to exclude objects with type 2 as in your example ? http://jsfiddle.net/MULpY/1/ – Fred Mar 02 '14 at 15:06
  • The filter function has to return a boolean. I dont think you can use it to execute other commands ...you can probably hack it to do something, but that wouldn't be a nice way of doing things – link64 Mar 02 '14 at 21:43
  • Sorry just realised I made a mistake by pasting my example. It should have been (just like in the jsfiddle exemple): `Types 1 & 3` and `$scope.myFunction = function() { $scope.myFilter = {type: 2}; alert("done"); };`. It works that way but not when I try to exclude objects types. But I understand it's not a nice way of doing things, it's just I'm a bit in a hurry... Thanks anyway! – Fred Mar 03 '14 at 16:52
  • 1
    hurray ! just had to use a closure within myFunction() that way: `$scope.myFunction = function() { $scope.myFilter = function(val) { return val.type != 2; } alert("done"); };` jsfiddle updated: http://jsfiddle.net/j7xLZ/ hope it can help other people stuck like I was ! thanks for your explanations anyway @link64, it really helped !! – Fred Mar 04 '14 at 13:38
  • just note if anyone else has issues. _null_ did not work for me to show all or clear filter. `myfilter = {}` did. – jamie Aug 20 '15 at 09:27