How to create filter in Angularjs?

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?

Answers:

Answer

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;
     });
  }
})
Answer

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.

Please see in the snapshots

Please see in the snapshots

Please see in the snapshots

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.