current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

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

1 Answer

up vote 0 down vote accepted

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

share|improve this answer
1  
Thanks link64, that's quite clean and simple, exactly what I was searching for ! great stuff !! –  Surreal Feb 24 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 ! –  Surreal Feb 26 at 20:55
    
Additional question: can I add parameters to myFunction() ? If so, how can I add them in html ? <span ng-click="myFilter = myFunction(a,b)"> ? –  Surreal Feb 26 at 21:12
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: stackoverflow.com/questions/16227325/… –  link64 Feb 26 at 22:54
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: jsfiddle.net/j7xLZ hope it can help other people stuck like I was ! thanks for your explanations anyway @link64, it really helped !! –  Surreal Mar 4 at 13:38
show 5 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.