angularjs: passing filtered array to directive

Question

I'm looking for a way to pass a filtered array to a directive:

I've tried the following:

<my-directive model="myArray | filter:{myProperty: 'some value' }" />

but that does not work. I think it's meant to be used with ng-repeat, because here I'm just passing a function instead of the filtered array.

Is there a way to do that, other than making a filtered copy of my array ?

EDIT

Here's the full code:

<request-service type="editing" jobs="vm.selectedMaterial.jobs | filter:{service.code: 'ED'}"></request-service>
<request-service type="translation" jobs="vm.selectedMaterial.jobs | filter:{service.code: 'TR'}"></request-service>

and the directive:

(function () {
'use strict';

var directiveId = 'requestService';

angular.module('comp.domain.directives').directive(directiveId,  [directiveFunc]);

function directiveFunc(dependency) {
    return {
        restrict: 'E',
        templateUrl: 'app/dm/views/templates/requestService.html',
        scope: {
            type: '@',
            jobs: '='
        },
        link: function (scope, element, attrs) {                
        }
    };
}
})();

when doing so, I get the error 'Converting circular structure to JSON'

EDIT 2

Following suggested solution, I did that:

 $scope.filterJob = function (type) {
        if ($scope.vm.selectedMaterial) {
            return $scope.vm.selectedMaterial.jobs.filter(function (job) { return job.service.code === type; });
        };
    }

and in the view:

  <request-service type="ED" jobs="filterJob('ED')"></request-service>

But that still gives me the same error.

how did you configure your directive? How did you access the model value? the syntax you are using is not special to ng-repeat. — michael, Feb 10 '14 at 11:09
I've updated my post with all the code involved. Hopefully it's clearer now. — Sam, Feb 10 '14 at 12:43
Have you tried filteredArray = (unfilteredArray | filter: {prop: 'value'}))? — Index, Feb 10 '14 at 12:51
ok, i've tried that but I still get the exception. '10 iterations reached'. Converting circular structure to JSON. — Sam, Feb 10 '14 at 12:54
I think I'm having same problem as here: http://stackoverflow.com/questions/21100108/using-filter-on-directive-attribute-causes-infinite-loop-in-digest-cycle — Sam, Feb 10 '14 at 13:09
why on earth do you want pass a filter in that way ? pass the filter in a isolate scope property like myfilter: '=' and than in the directive $filter(scope.myfilter)(scope.jobs); or like that — Whisher, Feb 10 '14 at 13:58

score 3 · Accepted Answer · answered Feb 10 '14 at 14:03

3

Your both questions are related to each other.

You can apply filter on on ng-model, but you should not do that. Because it will give you error you are facing in your second question.

When you pass filter job to your directive, angular will place a watch on your jobs variable. So when jobs gets assigned in directive watch get called, which will trigger filter again, and this will goes on until maximum digest cycle reached by angular.

To avoid this situation, you can create a filter method and pass that method in ng-model. This way you can avoid both copy creation and maximum digest cycle error.

answered Feb 10 '14 at 14:03

dhavalcengg

4,678
1
17
25

You have created filter method, but it is doing same thing you have done earlier. Filter on array jobs will also create a new array object. You can create another scope variable with filter list of specific type, and pass that variable in directive. This will solve maximum digest cycle issue. If you are taking job type value from other model, then you can change filter array on model change. It will work fine. Do not assign model to method or filter which returns an object array, otherwise you will face digest cycle problem. – dhavalcengg Feb 11 '14 at 08:12

angularjs: passing filtered array to directive

1 Answers1

Linked