如何使用带有 ng-repeat 的过滤器根据字段值过滤和对象

Question

我正在使用 Angular 并且我有这个对象：

$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}
};

我想根据我可以从输入文本中获得的 "name" 和 "type" 值来过滤此对象。那么我如何使用 ng-repeat 中的过滤器来做到这一点，例如：我想显示包含 "file4" 类型为“.png”的文件。

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

Answer 1

您可以使用简单的 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>

Answer 2

我已经使用这样的转换过滤器解决了这个问题：

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

并在应用搜索过滤器之前过滤项目

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>

如何使用带有 ng-repeat 的过滤器根据字段值过滤和对象

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

javascript

angularjs

angularjs-ng-repeat

angular-filters