2016-10-26 13 views
2

最近、AngularJSを使い始めました。私は自分のワインストアのチェックボックスフィルタを作っています。 アイテムのようになります。私は国とこのようなアイテムの他の非配列プロパティのフィルタを作るために管理してきましたAngularJSフィルタネストされた配列と返された親オブジェクト

 { 
    "id": 17, 
    "name": "Ermelinda Freitas Reserva", 
    "tag_ids": [40, 12, 56, 6, 60], 
    "tag_names": ["Roasted", "Robust", "Blackberry", "Mouth-filling", "Animal"], 
    "price": 29, 
    "weight": "0", 
    "image": "1467208469_wijn1.jpg", 
    "stock": 57, 
    "year": 1998, 
    "special": 0, 
    "color_id": 1, 
    "color": "Red", 
    "region_id": 25, 
    "region": "Alentejo", 
    "country_id": 6, 
    "country": "Portugal", 
    "grape_ids": [34, 35, 20], 
    "grape_names": ["Castelão", "Touriga Naçional", "Cabernet Sauvignon"] 
} 

for(i = 0; i< wines.length; i++){ 

     if($scope.countries.indexOf(wines[i].country) === -1) $scope.countries.push(wines[i].country); 
    }; 

しかし、今、私が作るしようとしています1つはブドウのためです。私は、次のような配列内のすべての一意の値を収集することで始まっ:

angular.forEach($scope.wines, function(wine){ 
    angular.forEach(wine.grape_names, function(grape){ 
    for(i = 0; i< wine.grape_names.length; i++){ 
     if($scope.grapes.indexOf(wine.grape_names[i]) === -1) $scope.grapes.push(wine.grape_names[i]); 
    }; 
    }); 
}) 

をだから今、私は項目が選択したフィルタに一致するすべてのブドウを持っているかどうかを確認する必要があり、ここで私は立ち往生午前ところです:

$scope.filter.grape = {}; 
$scope.filterByGrape = function(wine){ 

    angular.forEach(wine.grape_names, function(grape){ 

    return $scope.filter.grape[grape] || noFilter($scope.filter.grape); 
    }) 
}; 

フィルタ:

<div class="col-lg-3 col-md-4 col-sm-6 " data-id="{{wine.id}}" ng-init="getQuantity(wine.id)" data-ng-repeat="wine in filteredWines =(wines | orderBy:defaultOrder | filter:filterByColor | filter:filterByCountry | filter:filterByGrape | priceRangeFilter:priceRangeSlider | yearRangeFilter:yearRangeSlider | filter:search) | start: (currentPage - 1) * itemsPerPage | limitTo:itemsPerPage"> 

enter image description here

すべてのヘルプ大歓迎です!

+0

javascriptでのみ行う必要がありますか、アンダースコアやロダッシュなどのライブラリを使用できますか? – pedromarce

+0

私はこれらのことについて聞いたことがありません:) – LordStryker

+0

データが十分に大きい場合は、多くのフィルタを使用しないでください。パフォーマンスが問題になる場合は、コントローラで管理する方がずっと簡単です。フィルタと結果は同じコントローラにありますか? – pedromarce

答えて

0

問題grape_namesのforEachの最初の繰り返しをチェックするだけで、そこから関数を返すことができます。

$scope.filter.grape = {}; 
$scope.filterByGrape = function(wine){ 
    var found = noFilter($scope.filter.grape); 
    angular.forEach(wine.grape_names, function(grape){ 
    found = $scope.filter.grape[grape] || found; 
    }) 
    return found; 
}; 
+0

ありがとう!私はこれを働かせようとします。 – LordStryker

+0

私はそれがこのように動作するように管理してきました。しかし、フィルタは逆になっているので、すべてのボックスを手動でチェックしない限り結果は得られません。また、いくつかのチェックボックスは項目を返しません... $ scope.filter。ブドウ= {}; var found = {}; $ scope.filterByGrape =関数(ワイン){ angular.forEach(wine.grape_names、関数(grape_name){ angular.forEach($ scope.grapes、関数(ブドウ){ IF(grape_name ==ブドウ) { found = $ scope.filter.grape [grape]; } }) }) リターンが見つかりました。 }; – LordStryker

+0

心配しないで、私はそれを修正しました。 – LordStryker

関連する問題