使用关联数组过滤 ng-repeat

16 浏览
0 Comments

使用关联数组过滤 ng-repeat

我有一个关联数组（或者更准确地说是对象）

$scope.items = { 'x': {...}, 'y': {...} };

我想要使用ng-repeat来循环遍历，这个工作得很好

然而过滤器似乎没有起作用，它被定义为

$scope.customFunction = function (item) { return item.status === 'active'; }

然而，过滤器没有起作用。无论过滤器是什么，我总是得到整个集合。在过滤器控制器中调用警报甚至都没有显示出来。似乎根本没有调用该函数。

以前我是通过遍历数组来实现过滤的，这个方法很好用：

$scope.items = [ {...}, {...} ];

出于简单起见，我没有包含我的逻辑，我有一些过滤逻辑而不仅仅是返回false。

0

2 答案

0 Comments

问题原因：

使用ng-repeat指令时，想要对一个关联数组进行过滤，但是ng-repeat指令默认只能对数组进行过滤，无法直接对关联数组进行过滤。

解决方法：

通过编写一个自定义的过滤器(filterObject)，可以对关联数组进行过滤。该过滤器的实现方式是遍历关联数组中的每个元素，根据指定的回调函数对每个元素进行判断，满足条件的元素会被添加到一个新的关联数组中并返回。

具体代码如下：

app.filter('filterObject', function() {
    return function(items, callback) {
        var filtered = {};
        angular.forEach(items, function(item, key) {
            if (callback(item)) {
                filtered[key] = item;
            }
        });
        return filtered;
    };
});

使用方式如下：

item in items | filterObject:

其中，items为要进行过滤的关联数组，为一个自定义的回调函数，用于判断每个元素是否满足过滤条件。

0
0 Comments

问题的原因是，ng-repeat指令无法直接对关联数组进行过滤，因为ng-repeat默认是针对数组进行迭代的，而不是对象的属性。解决方法是在过滤之前手动将对象转换为数组。然而，这样做会导致在ng-repeat中无法访问id属性。

在进行任何过滤逻辑之前，需要使用items对象填充一个标准数组。

以下是一个执行所述逻辑的过滤器示例：

app.filter('customFunction', function(){
    return function (items) { 
        var filtered = [];
        angular.forEach(items, function(item){
            if (item.status === 'active') {
                filtered.push(item);
            }
        });
        return filtered;
    };
});

通过使用自定义的customFunction过滤器，可以实现对关联数组进行过滤的功能。

0