Angularjs ng-click displaying data filtered by multiple parameters

Question

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

By the way, I tried <span ng-click="myFilter.type != 2">Types 1 & 3</span> and it still does't work... — Fred
– Fred, Commented Feb 23, 2014 at 23:01
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 docs.angularjs.org/api/ng/filter/filter for more details — link64
– link64, Commented Feb 24, 2014 at 3:44

link64 · Accepted Answer · 2014-02-24 03:48:23Z

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

answered Feb 24, 2014 at 3:48

link64

1,9661 gold badge26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Fred Over a year ago

Thanks link64, that's quite clean and simple, exactly what I was searching for ! great stuff !!

Fred Over a year ago

By the way, could you just explain me quickly what the val parameter refers to here ? function(val) { return (val.type != 2); }; Thanks !

Fred Over a year ago

Additional question: can I add parameters to myFunction() ? If so, how can I add them in html ? <span ng-click="myFilter = myFunction(a,b)"> ?

link64 Over a year ago

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: stackoverflow.com/questions/16227325/…

Fred Over a year ago

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: jsfiddle.net/j7xLZ hope it can help other people stuck like I was ! thanks for your explanations anyway @link64, it really helped !!

|

Collectives™ on Stack Overflow

Angularjs ng-click displaying data filtered by multiple parameters

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related