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
– michael, Commented Feb 10, 2014 at 11:09
I've updated my post with all the code involved. Hopefully it's clearer now. — Sam
– Sam, Commented Feb 10, 2014 at 12:43
Have you tried filteredArray = (unfilteredArray | filter: {prop: 'value'}))? — Index
– Index, Commented Feb 10, 2014 at 12:51

dhavalcengg · Accepted Answer · 2014-02-10 14:03:28Z

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, 2014 at 14:03

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

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

1 Comment

dhavalcengg Over a year ago

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.

Collectives™ on Stack Overflow

angularjs: passing filtered array to directive

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related