Using Filters With Directives in AngularJS

Question

I'm attempting to use filters within an AngularJS directive but not sure exactly how to do so. From some info on the mailing list it appears that you should be able to inject $filter and use it, but I'm not sure how/where to invoke it.

My directive currently looks like this:

myApp.directive('fancyDisplay', ['$filter', function($filter) {
    return {
        scope: {
            'fancyDisplay': '='
        },
        template: "<div ng-repeat='datum in fancyDisplay | filter:tagFilter'>{{datum.name}}</div>"
    };
}]);

Although the filter:tagFilter isn't working. How should I filter my data in the directive?

JSfiddle available at http://jsfiddle.net/VDLqa/4/ Thanks in advance for any responses.

score 13 · Accepted Answer · answered Feb 28 '13 at 14:49

13

You're creating a new isolate scope on the directive (scope: { 'fancyDisplay': '=' }), that means you won't be able to access properties from the parent scope. Since tagFilter is defined on the parent scope, you won't be able to access it.

Pass tagFilter as an attribute to the directive:

<div fancy-display="model.data" filter="tagFilter"></div>

And on the directive:

scope: {
    fancyDisplay: '=',
    tagFilter: '=filter'
},

jsfiddle: http://jsfiddle.net/bmleite/VDLqa/5/

answered Feb 28 '13 at 14:49

bmleite

26,850
4
71
46

Hmm... how would I extend that to multiple filters? – Feb 28 '13 at 14:54
Define more attrs: `
` and on the directive `scope: { fancyDisplay: '=', filter1: '=', filter2: '=' }`. Note: I've called them 'filter1' and 'filter2' but you can call them whatever you want. Also, if you start having many filters, I would recommend you to pre-filter the `ng-model` data before sending it to the directive. – bmleite Feb 28 '13 at 15:26
Pre-filtering is interesting as that's where I started. I tried this on the directive itself but it didn't work; how would I alter the fiddle to achieve this? – Feb 28 '13 at 15:56
1

On the watchers, add something like: `$scope.model.filteredData = $filter('filter')($scope.model.data, $scope.tagFilter);` and on the HTML: `
` http://jsfiddle.net/bmleite/VDLqa/6/ (note: don't forget to inject the `$filter` on the controller). – bmleite Feb 28 '13 at 16:16
Thanks man! I wast just forgetting to add the ```['$filter', function($filter)``` – Pablo Jan 27 '16 at 21:40

dviramontes · Answer 2 · 2016-03-31T18:26:35.227

Thanks to @bmleite for your answer.

Another thing that might be helpful is to make sure to declare your ng-repeat directive like this incase you have deplicates on your list.

It took me forever to figure this out. Apparently you must filter before you specify the track by x :

app.directive("someDirective", function(){ ...

    restrict: "E",
    ...
    template:"<ul ng-repeat='t in tree | filter:key track by $index'><li>{{t}}</li></ul>",

});

The inverse does not work.

Using Filters With Directives in AngularJS

2 Answers2

Linked