web-dev-qa-db-ja.com

Angularプロパティでオブジェクトをフィルタリングする

次の類似した構造（サービスからデータが返される方法）にある一連のオブジェクトプロパティを持つオブジェクトがあります。

{
  "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」ではない項目、つまり5回ではなく3回の繰り返しのみです。そのフィルターはどういうわけかこれを行うために活用することができますが、どのようにすればよいかわかりません。私は次を試しました：

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

しかし、私は1つが機能しないことを知っています。

javascripttemplatesangularjsloops
28
Conqueror

フィルタは配列で機能しますが、オブジェクトリテラルがあります。

したがって、オブジェクトリテラルを配列に変換するか、オブジェクトリテラルを受け取るよりも独自のフィルターを作成できます。

これらのインデックス値が必要ない場合は、配列に変換するのが最善の方法かもしれません（配列が機能するフィドルは次のとおりです： http://jsfiddle.net/NqA8d/3/ ）：

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

フィルターを実行したい場合は、次の1つの方法があります。

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/

16
KayakDave

少し遅れて答えましたが、これは役立つかもしれません：

特定のオブジェクトの孫（またはより深い）でフィルタリングする場合は、オブジェクト階層を引き続き構築できます。たとえば、「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 } }">
45
Vaibhav Pachauri

ここではオブジェクトの変換が最良の選択肢であることに同意しますが、このフィルター関数を使用することもできます。

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 も参照してください。

16
hugo der hungrige

これを試してください（コントローラーで）：

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

HTMLマークアップでは：

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

これを試してくださいオブジェクトをフィルタリングする

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

その必要はありません。このソリューションは、独自のフィルターを変換または作成することなく正常に機能します。

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

したがって、object.propertyではなくobject。["property"]になります。

0
Alex Zanfir