Angular Create custom list of filters

Question

i'm completely new to angular so forgive my question. I'm trying to create a list of filters with the user input. Here's a plunker of what i'm trying to do. http://plnkr.co/edit/asrZJj2HFJCnmmqJLlgt?p=preview

I understand that my condition for my ng-repeat should be something like that:

ng-repeat="filter in filters | filter: filters"

and inside my filters something like that to work

ng-repeat="...| filter:{dev:java, happy:true}"

So can i do it in the way i'm trying to do or i have to create a filter module?

Are you trying to filter the data ?

Aj1
– Aj1

2015-04-12 17:13:01 +00:00
Commented Apr 12, 2015 at 17:13 — Aj1
– Aj1, Commented Apr 12, 2015 at 17:13
yes i'm exactely trying to do that.

adam
– adam

2015-04-12 17:15:46 +00:00
Commented Apr 12, 2015 at 17:15 — adam
– adam, Commented Apr 12, 2015 at 17:15

dfsq · Accepted Answer · 2015-04-12 17:13:33Z

1

The simplest thing you can do is to use simple object for filters instead of array, where filter name would be a property key. In this case you would render filters like this:

<span class="btn btn-success" ng-repeat="(name, value) in filters">
    <strong>{{name}} : {{value}}</strong>
</span>

and populate them in controller like this:

$scope.createFilter = function(name, value) {
    $scope.filters[name] = value;
    $scope.cleanInput();
};

With this setup it's very easy to apply filters to the table data:

ng-repeat="user in users | filter:filters"

Demo: http://plnkr.co/edit/Hp8EPpvHv8vklSiFOG6U?p=info

answered Apr 12, 2015 at 17:13

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

3 Comments

adam Over a year ago

I was also wondering to create a filter when the user click on a row but this time only with the user name, have you an idea to do it in the same way? and by the way thanks again man!

dfsq Over a year ago

You can use ngClick on tr. Check this demo: plnkr.co/edit/U13deGvSfdqJo0JFsLC4?p=preview

adam Over a year ago

Thank you a lot, so easy with your solution ;)

Collectives™ on Stack Overflow

Angular Create custom list of filters

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related