How to filter and object based on fields values using a filter with ng-repeat

Question

I'm using Angular and I've this object:

$scope.items = {
    'abcdhx3': {name:'file1.jpg', type:'.jpg', size:30000},
    'sxcdhb2': {name:'file2.jpg', type:'.png', size:30000},
    'k4cdhx5': {name:'file3.jpg', type:'.jpg', size:30000},
    '23cdhd3': {name:'file4.jpg', type:'.png', size:30000},
    'ascdhx3': {name:'file45.jpg', type:'.png', size:30000}
};

I want to filter this object based on "name" and "type" values that I can get from input texts. So how can I do that using a filter in ng-repeat, for example: I want to show files that contains "file4" with type ".png".

<div data-ng-repeat="(key, item) in items">
    <div>{{ item.name }}</div>
</div>

Ragnar · Accepted Answer · 2015-01-08 00:28:02Z

1

I've solved the problem using a transformation filter like this:

angular.module('test').filter('itemsFilter', [
    function() {
        return function(items) {
            var list = [];
            for (var i in items) {
                list.push(items[i]);
            }
            return list;
        };
    }
]);

And filtering items before apply the search filter

Name: <input type="text" ng-model="search.name" />
Type: <input type="text" ng-model="search.type" />
<div ng-repeat="item in items | itemsFilter | filter:search">
    <li>{{item.name}}</li>
    <li>{{item.type}}</li>
</div>

answered Jan 8, 2015 at 0:28

Ragnar

4,6281 gold badge33 silver badges42 bronze badges

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

Comments

klauskpm · Accepted Answer · 2015-01-07 23:13:29Z

0

You can do this by using a simple Filter:

HTML

Name: <input type="text" ng-model="search.name" />
Type: <input type="text" ng-model="search.type" />
Whatever: <input type="text" ng-model="search.$" />
<ul ng-repeat="item in items | filter:search">
    <li>{{item.name}}</li>
    <li>{{item.type}}</li>
</ul>

answered Jan 7, 2015 at 23:13

klauskpm

3,1652 gold badges20 silver badges29 bronze badges

3 Comments

Ragnar Over a year ago

It doesn't works, I've tried that way without success, when "items" is an array it works, but "items" is an object and all filter properties are inside each item value.

PSL Over a year ago

@Ragnar You cannot filter an object. You would need to convert it to an array. Object is a mere kvp. You would need to implement your own filter for that

Ragnar Over a year ago

I'm trying using a filter function but it doesn't works "ng-repeat="item in items | filter:filterFunction" with filterFunction(item, index) {..}

Collectives™ on Stack Overflow

How to filter and object based on fields values using a filter with ng-repeat

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related