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

回答

相关问题