Angularjs Filter Produkt durch Klicken catogery

können Sie bitte geben Sie mir Code für Filter Produkte klicken Sie auf Kategorie Menü. Unterhalb der Codes HTML, JSON und JS.Angularjs Filter Produkt durch Klicken catogery

Kategorie HTML:

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

Produktanzeige 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-Daten:

"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-Code:

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

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

Quelle

2017-05-25 Tarun Mishra

Möchten Sie auf https Zugabe einer Probe : //codepen.io/, bitte? –

@ tarun-mishra: können Sie bitte Ihre Frage genauer machen? Was ist dein Problem? Was funktioniert momentan nicht in deinem Code? Was hast du versucht? Was hast du Mühe zu verstehen? –

@ThomasGuillory bitte überprüfen Sie das Projekt über Code Stift es ist ein großes Projekt, so dass ich kleine Teil hinzugefügt. Ich bekomme Daten mit Diensten von JSON Sie können in angularjs Service gesehen werden https://codepen.io/tarunmishra592/pen/ZKZLjV?editors=1010 –

filterByCat Ersetzen durch folgende Funktion

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

und in der Ansicht:

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

Hier ist ein Beispielcode auf codepen.com

Quelle

2017-05-25 20:19:15

Hallo @ مصطصطی Bitte Überprüfen Sie, dass ich Projekt über Codepen hinzugefügt habe, das ich Daten durch Dienste erhalte, die ich geschaffen habe, können Sie in js sehen. Mit Ihrem Code bekomme ich Fehler wie: Erwartete Array aber erhalten: {"1": {"id": "1", "catogery": "Männer"}} –

Lieber Freund, was ist der Code Stift Verknüpfung? –

Angular Filter sind ein Array als Eingabe erwartet. Ihre Daten sind kein Array, sondern ein Objekt. Bevor Sie den Filter verwenden können, müssen Sie zuerst Ihre Daten korrekt formatieren.

Wenn Sie nicht über die Tasten Inhalt kümmern, können Sie Folgendes verwenden:

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

Hier ist eine modifizierte Version des Stiftes examplifying dies: https://codepen.io/anon/pen/OmYmGJ

Quelle

2017-05-28 10:11:34

Angularjs Filter Produkt durch Klicken catogery

Antwort

Verwandte Themen