カタログをクリックしてAngularjsフィルター製品

Question

カテゴリメニューをクリックしてフィルター製品のコードを教えてください。 HTML、JSON、JSのコードの下にあります。

カテゴリーのHTML：

<ul> 
<li ng-repeat="cat in allData"><a ng-click="catFun(cat.catogery)" class="list-group-item">{{cat.catogery}}</a></li> 

製品の表示HTML：

<div ng-repeat="product in allData | filter:filterBycat" class="col-sm-4 col-lg-4 col-md-4"> 
<div class="thumbnail"> 
    <img ng-src="{{product.productImg}}" alt=""> 
     <div class="caption"> 
      <h4 class="pull-right">{{product.productPrice}}</h4> 
      <h4><a ng-href="#/productdetails/{{product.id}}">{{product.productTitle}}</a></h4> 
      <p>{{product.description}}</p> 
     </div> 
    </div> 
    </div> 

JSONデータ：

"1": { 
    "id":"1", 
    "catogery":"men", 
    "productImg": "http://placehold.it/320x150", 
    "description": "This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", 
    "productTitle": "First Product", 
    "productPrice": "24.99", 
}, 
"2": { 
    "id":"2", 
    "catogery":"women", 
    "productImg": "http://placehold.it/320x150", 
    "description": "This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", 
    "productTitle": "Second Product", 
    "productPrice": "26.99", 
}, 

JSコード：

$scope.filtered = {}; 
$scope.catFun = function(catVal){ 
    $scope.filtered = catVal; 
}; 

$scope.filterBycat = function(item){ 
    if($scope.filtered){ 
     return $scope.filtered === Object; 
    }else{ 
     return item; 
    } 
} 

Answer 1

は、以下の機能

$scope.getFilter = function(){ 
    return {"catogery":$scope.filtered} 
    } 

とビュー内でfilterByCatを交換：ここ

<div ng-repeat="product in allData | filter:getFilter"> ... </dive> 

はcodepen.com

Answer 2

角フィルター上のサンプルコードで入力として配列を期待しています。あなたのデータは配列ではなくオブジェクトです。フィルタを使用するには、まずデータを正しくフォーマットする必要があります。

あなたがキーの内容を気にしない場合は、以下を使用することができますが：ここでは

$scope.allData = Object.keys(d).map(function(key){ return d[key] }) 

がこれをexamplifyingあなたのペンの修正版です：https://codepen.io/anon/pen/OmYmGJ