Adding common code to an angular filter module

Question

I have 3 filters I need to write for a project, all 3 of them do the same thing, but with a different array from the $rootScope (They are translating a numeric status into its display value).

How can I write this code once and call it from all 3 filters AND keep that one instance inside the myFilters module?

I'm not seeing a place I can put that code. If I was writing a service, I'd have a block I could put it in, but with filters, I don't have that common spot to write the code.

Right now I've just moved it to global scope, but I'd like to move it into the filter module so I don't have to repeat it 3 times, or store it on the global scope.

angular.module('myFilters', [])
.filter('aStatus', function($rootScope) {
    return function(id, attr) {
        var objectArray = $rootScope.appConfig.aStatuses,
            index = _.findIndex(objectArray, function(obj) { return obj.id === id; });
        if(index < 0) {
            return "";
        }
        if(attr) {
            return objectArray[index][attr];
        }
        return objectArray[index];
    };
})
.filter('bStatus', function($rootScope) {
    return function(id, attr) {
        var objectArray = $rootScope.appConfig.aStatuses,
            index = _.findIndex(objectArray, function(obj) { return obj.id === id; });
        if(index < 0) {
            return "";
        }
        if(attr) {
            return objectArray[index][attr];
        }
        return objectArray[index];
    };
})
.filter('cStatus', function($rootScope) {
    return function(id, attr) {
        var objectArray = $rootScope.appConfig.cStatuses,
            index = _.findIndex(objectArray, function(obj) { return obj.id === id; });
        if(index < 0) {
            return "";
        }
        if(attr) {
            return objectArray[index][attr];
        }
        return objectArray[index];
    };
});

why dont you want to create only one filter and pass an array you want into it as a parameter? — Fedor Skrynnikov
– Fedor Skrynnikov, Commented Feb 7, 2014 at 4:54

Klaster_1 Нет войне · Accepted Answer · 2014-02-07 04:30:23Z

Why not to extract generic function into service and just call it from filter with prebound objectArray?

angular.module('myFilters', [])
.factory("StatusFilter", function ($rootScope) {
    return function(objectArray, id, attr) {
        var index = _.findIndex(objectArray, function(obj) { return obj.id === id; });
        if(index < 0) {
            return "";
        }
        if(attr) {
            return objectArray[index][attr];
        }
        return objectArray[index];
    };
});
.filter('aStatus', function(StatusFilter, $rootScope) {
    return function(id, attr) {
        return StatusFilter($rootScope.appConfig.aStatuses, id, attr);
    };
})
.filter('bStatus', function(StatusFilter, $rootScope) {
    return function(id, attr) {
        return StatusFilter($rootScope.appConfig.bStatuses, id, attr);
    };
})
.filter('cStatus', function(StatusFilter, $rootScope) {
    return function(id, attr) {
        return StatusFilter($rootScope.appConfig.cStatuses, id, attr);
    };
})

Alternatively, you can extract that function into filter:

angular.module('myFilters', [])
.filter("Status", function ($rootScope) {
    return function(objectArray, id, attr) {
        var index = _.findIndex(objectArray, function(obj) { return obj.id === id; });
        if(index < 0) {
            return "";
        }
        if(attr) {
            return objectArray[index][attr];
        }
        return objectArray[index];
    };
});
.filter('aStatus', function($filter, $rootScope) {
    return function(id, attr) {
        return $filter("Status")($rootScope.appConfig.aStatuses, id, attr);
    };
})
.filter('bStatus', function($filter, $rootScope) {
    return function(id, attr) {
        return $filter("Status")($rootScope.appConfig.bStatuses, id, attr);
    };
})
.filter('cStatus', function($filter, $rootScope) {
    return function(id, attr) {
        return $filter("Status")($rootScope.appConfig.cStatuses, id, attr);
    };
})

Collectives™ on Stack Overflow

Adding common code to an angular filter module

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related