AngularJS filter by property which name is expanded from a variable

Question

I have an ng-repeat attribute with this filter

ng-repeat="offer in Offers.full | filter: { IdOffer: Filter.value } | orderBy: Order.type+Order.column track by offer.IdDeal

Pretty straightforward: the array of objects is contained in $scope.Offers.full, the property name selected for "order by" is stored in $scope.Order.column (and $scope.Order.type add a + or - to switch from ascending to descending), the filter on "IdOffer" property is in $scope.Filter.value.

Now I want to filter $scope.Filter.value not on "IdOffer" property but on a property witch name is stored in $scope.Filter.column variable. Is it possible something like this?

| filter: { Filter.column: Filter.value }

@Lex sorry I didn't. To create a custom filter is an option but I was looking for an "already in place" method and I finally decided to create a $scope.filterObj object where to add attributes dinamically, then I passed it to the filter | filter: filterObj. Your solution seem to work as well, but I can't test it right now because I don't have access to the repository with the code I wrote — Naigel
– Naigel, Commented Aug 18, 2016 at 14:53
Ah, gotcha. One benefit of creating it as a custom filter is that you'd be able to use it in other locations of your app, but if that's not a consideration then doing the filtering in the controller is probably good enough. — Lex
– Lex, Commented Aug 19, 2016 at 0:08

Lex · Accepted Answer · 2016-08-16 14:35:43Z

You will have to write a custom filter for this, but it's pretty easy. Here's a sample that will do a case-insensitive filter similar to the filtering that's baked into Angular:

.filter('customFilter', function() {
    return function(input, filterColumn, filterValue) {
        if(!filterColumn || !filterValue) {
            return input;
        }
        var out = [];
        angular.forEach(input, function(item) {
            // convert numbers to strings so partial numbers can be matched as well
            var columnValue = angular.isNumber(item[filterColumn])
                ? item[filterColumn].toString()
                : item[filterColumn].toLowerCase();
            if(columnValue.includes(filterValue.toLowerCase())) {
                out.push(item);
            }
        });
        return out;
    }
})

You would use it as follows:

| customFilter:Filter.column:Filter.value

Collectives™ on Stack Overflow

AngularJS filter by property which name is expanded from a variable

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