Angular通过其属性过滤对象

时间:2013-11-08 01:04:33

标签: javascript templates angularjs loops

我有一个具有一系列对象属性的对象,这些属性具有以下类似结构(这是数据从服务返回的方式):

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

当我进行ng-repeat时,我可以迭代所有这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>

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

6 个答案:

答案 0 :(得分:45)

回答的时间不多,但这可能有所帮助:

如果要过滤给定对象的孙(或更深),可以继续构建对象层次结构。例如,如果要对'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 } }">

'not equals'的语法稍微偏离,请尝试以下方法:

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

答案 1 :(得分:16)

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

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

如果您不需要这些索引值,那么转换为数组可能是您最好的选择( 这是阵列工作的小提琴: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/

答案 2 :(得分:16)

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

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> 

另请参阅Plunker

答案 3 :(得分:4)

试试这个(在控制器中):

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

在HTML标记中:

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

答案 4 :(得分:0)

不需要这一切。此解决方案工作正常,无需转换或创建自己的过滤器:

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

因此,对象。[&#34;属性&#34;]而不是object.property。

答案 5 :(得分:0)

尝试此操作以过滤对象

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