How to create filter in Angularjs?

Question

I have this collection of courses:

 [{ id: 1, courseId: 2, text: 'John' },
  { id: 2, courseId: 2, text: 'Willi' },
  { id: 3, courseId: 2, text: 'Inga' },
  { id: 4, courseId: 1, text: 'Jerry' },
  { id: 5, courseId: 1, text: 'Michael' },
  { id: 1, courseId: 3, text: 'John' },
  { id: 2, courseId: 3, text: 'Willi' },
  { id: 3, courseId: 4, text: 'Inga' },
  { id: 4, courseId: 5, text: 'Jerry' },
  { id: 5, courseId: 5, text: 'Michael' }]

And I have this array of id's:

[{"id": 3},{"id": 2},{"id": 1}]

I need to filter array of courses by array of id's(i.e to display only text courses that have courseId = 3,2,1 ):

ng-repeat="course in courses| customFilter: [{"id": 3},{"id": 2},{"id": 1}]"

I need to create custom filter in angularJS that will filter array of courses by array of id's.

Any idea how can I implement customFilter for this purpose?

docs.angularjs.org/guide/filter#creating-custom-filters

JB Nizet
– JB Nizet

2015-08-21 21:49:29 +00:00
Commented Aug 21, 2015 at 21:49 — JB Nizet
– JB Nizet, Commented Aug 21, 2015 at 21:49

Pankaj Parkar · Accepted Answer · 2015-08-21 22:34:23Z

4

You could create your custom filter so that can provide you the filtered values, filter should take array of element to be filter array.

Markup

ng-repeat="course in courses| customFilter: [{"id": 3},{"id": 2},{"id": 1}]""

Filter

app.filter('customFilter', function(){
  return function(array, filterArray){
     var ids = [];
     angular.forEach(filterArray, function(val, index) {
        ids.push(val.id);
     }
     return array.filter(function(value){
        return ids.indexOf(value.id) !== -1;
     });
  }
})

edited Aug 21, 2015 at 22:34

answered Aug 21, 2015 at 21:49

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

5 Comments

Michael Over a year ago

,I have this format filter: customFilter: [{"id": 3},{"id": 2},{"id": 1}]" Not this: customFilter: [3,2,1]"

Pankaj Parkar Over a year ago

why you need this kind of filter..why dont simplify it??

Michael Over a year ago

because this result I get from the serivce.And I need to keep it in the foramt as abouve

Pankaj Parkar Over a year ago

though I've made changes accordingly..do look at them.

Michael Over a year ago

thanks for the help but seems that there is some errors

Shubham Verma · Accepted Answer · 2017-01-24 10:22:34Z

I have created a filter in angularJs project.

in my angular app name is angularApp.

var app = angular.module('angularApp', []); // This is your main angular app.

Now you want to create a filter for decode url.

app.filter('decodeURL', function() {
    return function(text) {
        if(text) {
            return text.split(' ').join('-').toLowerCase().replace(/[^a-z0-9]+/g, '-');
        }
    }
});

The above code is to create a filter to decode url. And my filter name is 'decodeURL' . we will use decodeURL as a filter in my code like if your URL is-

http://www.example.com/test1 test2 tes3

then filter make the URL like this-

http://www.example.com/test1-test2-tes3

How to use this filter in the html-

<a ui-sref="{{business.category[0].categoryName.toLowerCase()}}Detail({id:business.id,title:(business.title | decodeURL)})"></a>

// The above is for state routing in angularjs.

<a href="/coupon/{{coupon.id}}/{{coupon.title | decodeURL}}"
                                       class="btn btn-warning show-btnhome show-button-margin">Show</a>

//The above code for URL redirecting.

Collectives™ on Stack Overflow

How to create filter in Angularjs?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related