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

将filterByCat替换为以下函数

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

并在视图中：

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

以下是codepen.com

上的示例代码

Answer 2

角度滤镜期望数组作为输入。您的数据不是数组，而是对象。在能够使用过滤器之前，首先需要正确格式化数据。

如果您不关心密钥内容，可以使用以下内容：

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

以下是笔的修改版本，例如https://codepen.io/anon/pen/OmYmGJ

Angularjs通过点击catogery过滤产品

2 个答案: