Search code examples
javascriptangularjsangularjs-ng-repeatangular-filters

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


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>

Solution

  • 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>