按对象属性过滤对象的角度

Angular filter a object by its properties

本文关键字：对象 过滤 属性      更新时间：2023-09-26

我有一个具有一系列对象属性的对象，该对象具有以下类似的结构（这是数据从服务返回的方式）：

{
  "1": {
    "type": "foo",
    "name": "blah"
  },
  "2": {
    "type": "bar"
  },
  "3": {
    "type": "foo"
  },
  "4": {
    "type": "baz"
  },
  "5": {
    "type": "test"
  }
}

当我做一个ng重复时，我可以迭代所有5个对象，如下所示：

<div ng-repeat="item in items">{{item.type}}</div>

但是，我真正想做的是只迭代那些不是"foo"类型的项目，即 3 次迭代而不是 5 次迭代。我知道可以以某种方式利用过滤器来做到这一点，但我不确定如何做到这一点。我尝试了以下方法：

<div ng-repeat="item in items| !filter:{type:'foo'}">{{item.type}}</div>

但这行不通。事实上，即使执行以下操作以限制为 2 个对象（带有 item.type==="foo" 的对象），它也不起作用并执行 5 次迭代：

<div ng-repeat="item in items| filter:{type:'foo'}">{{item.type}}</div>

从本质上讲，我想做一些类似于：

<div ng-repeat="item in items" ng-if="item.type !=='foo'>{{item.type}}</div>

但是，我知道一个不起作用。

回答有点晚了，但这可能会有所帮助：

如果要筛选给定对象的子项（或更深），可以继续构建对象层次结构。例如，如果要筛选"thing.properties.title"，则可以执行以下操作：

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

您还可以通过将它们添加到过滤器对象来筛选对象的多个属性：

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">

"不等于"的语法有点偏差，请尝试以下操作：

<div ng-repeat="thing in things | filter: { properties: { title: '!' + title_filter } }">

过滤器适用于数组，但您有一个对象文字。

因此，您可以将对象文本转换为数组，也可以创建自己的过滤器，而不是接收对象文本。

如果您不需要这些索引值，那么转换为数组可能是您最好的选择（这是数组工作的小提琴：http://jsfiddle.net/NqA8d/3/）：

$scope.items = [{
    "type": "foo",
        "name": "blah"
}, {
    "type": "bar"
}, {
    "type": "foo"
}, {
    "type": "baz"
}, {
    "type": "test"
}];

如果您想进行过滤器，这里有一种方法可以做到这一点：

myApp.filter('myFilter', function () {
    return function (items, search) {
        var result = [];
        angular.forEach(items, function (value, key) {
            angular.forEach(value, function (value2, key2) {
                if (value2 === search) {
                    result.push(value2);
                }
            })
        });
        return result;
    }
});

还有那个小提琴：http://jsfiddle.net/NqA8d/5/

虽然我同意转换您的对象可能是这里的最佳选择，但您也可以使用此过滤器功能：

angular.module('app').filter('objectByKeyValFilter', function () {
return function (input, filterKey, filterVal) {
    var filteredInput ={};
     angular.forEach(input, function(value, key){
       if(value[filterKey] && value[filterKey] !== filterVal){
          filteredInput[key]= value;
        }
     });
     return filteredInput;
}});

喜欢这个：

<div ng-repeat="(key, value) in data | objectByKeyValFilter:'type':'foo'">{{key}}{{value.type}}</div>

另见普伦克。

试试这个（在控制器中）： 

$scope.notFooFilter = function(item)
{
    return (item.type !== 'foo');
};

在 HTML 标记中：

<div ng-repeat="item in items| filter:notFooFilter">{{item.type}}</div>

试试这个来过滤对象 

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });

不需要所有这些。此解决方案工作正常，无需转换或创建自己的过滤器：

 {{myModel.userSelectedHour["Start"]}}

因此，反对。["属性"] 而不是 object.property。

相关文章：