2016-10-26 2 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); 
    }; 

를하지만 지금 내가 만들려고 해요 하나는 포도를 위해. 나는 같은 배열의 모든 고유 한 값을 수집하여 시작했다 :

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 함수 (포도) { 경우 (grape_name == 포도) { found = $ scope.filter.grape [포도]; } }) }) return found; }; – LordStryker

+0

신경 쓰지 마라, 고칠 수 있었다. – LordStryker