Angularjs過濾產品通過點擊catogery

可以請給我代碼過濾產品點擊類別菜單。代碼HTML，JSON和JS下面。Angularjs過濾產品通過點擊catogery

類別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; 
    } 
}

來源

2017-05-25 Tarun Mishra

你在HTTPS添加樣本：//codepen.io/，請問？ –

@ tarun-mishra：你能否讓你的問題更具體一些？你的問題是什麼？目前你的代碼中沒有工作？你嘗試了什麼？你很難理解什麼？ –

@ThomasGuillory請檢查項目代碼筆它是大項目，所以我加了一小部分。我正在使用json的服務獲取數據，你可以在angularjs服務中看到 https://codepen.io/tarunmishra592/pen/ZKZLjV?editors=1010 –

替換

與filterByCat以下功能

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

並在視圖：

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

這裏是關於codepen.com

來源

2017-05-25 20:19:15

Hi @مصطفی請檢查我已經添加項目Codepen我通過我創建的服務獲取數據可以在js中看到。使用你的代碼我得到如下錯誤：預期的數組，但收到：{「1」：{「id」：「1」，「catogery」：「men」}} –

親愛的朋友，代碼筆是什麼鏈接？ –

角濾波器的樣本代碼期待的陣列作爲輸入。你的數據不是一個數組，而是一個對象。在能夠使用過濾器之前，您首先需要正確格式化數據。

如果你不關心的密鑰內容，可以使用以下命令：

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

這是你的筆examplifying這個修改後的版本：https://codepen.io/anon/pen/OmYmGJ

來源

2017-05-28 10:11:34

Angularjs過濾產品通過點擊catogery

回答

相關問題