угловой нг-повтор с несколькими вариантами фильтра

Question

У меня есть этот JSON данные:

{ 
    "doorTypes": [ 
    { 
    "name": "Flat Panel", 
    "image": "doors/flatpanel.png", 
    "type": "Wood" 
    }, 
    { 
    "name": "Raised Panel", 
    "image": "doors/raisedpanel.png", 
    "type": "Wood" 
    }, 
    { 
    "name": "Slab Door", 
    "image": "doors/slabdoor.png", 
    "type": "Wood" 
    }], 
    "woods": [ 
    { 
    "name": "Alder", 
    "image": "species/alder.png", 
    "weights":[ 
    { 
     "name": "Flat Panel", 
     "weight": 1.19 
    }, 
    { 
     "name": "Raised Panel", 
     "weight": 1.76 
    }, 
    { 
     "name": "Slab Door", 
     "weight": 1.97 
    }] 
    }, 
    { 
    "name": "Ash", 
    "image": "species/ash.png", 
    "weights":[ 
    { 
     "name": "Flat Panel", 
     "weight": 1.7 
    }] 
    }, 
    { 
    "name": "Bamboo", 
    "image": "species/bamboo.png", 
    "weights":[ 
    { 
     "name": "Slab Door", 
     "weight": 2.7 
    }] 
    }, 
    { 
    "name": "Beech", 
    "image": "species/beech.png", 
    "weights":[ 
    { 
     "name": "Raised Panel", 
     "weight": 2.27 
    }, 
    { 
     "name": "Slab Door", 
     "weight": 2.54 
    }] 
    }] 
} 

В зависимости от того, что doorType вы выбираете, я хотел бы, чтобы фильтровать wood типы. Например, если вы выберете Raised Panel, я хочу только леса, которые имеют вес с Raised Panel, чтобы они появились. Таким образом, в этом случае Alder and Beech будет показывать, а не Ash или Bamboo

Сейчас я строго использую ng-repeat и отображает все типы древесины. Я просмотрел документы для ng-фильтра, но я не уверен, как применить его в случае, когда объект weights имеет несколько свойств.

Мой текущий нг-повторить:

<ul class="touchcarousel-container"> 
    <li class="touchcarousel-item" ng-repeat="obj in currentObject"> 
    <div class="img-select" ng-click="setActive(this)" ng-class="{itemSelected : isActive(this)}"> 
     <div align="center"> 
     <img ng-src="resources/images/aventos/{{obj.image}}" /> 
     </div> 
     <div class="img-title">{{obj.name}}</div> 
    </div> 
    </li> 
</ul> 

Я также открыт для изменения моего JSON, если это имеет смысл сделать это.

EDIT

Это было мое решение:

<li class="touchcarousel-item" ng-repeat="obj in currentObject" ng-show="woodTypes(obj)"> 

, а затем:

$scope.woodTypes = function(obj) 
{ 
    var shown = false; 
    for (var i = 0; i < obj.weights.length; i++) 
    { 
     if (obj.weights[i].name == $scope.cabinetDetails.door.name) 
     { 
      shown = true; 
      break; 
     } 
    } 
    return shown; 
} 

Answer 1

Попробуйте написать пользовательский фильтр, и с помощью какой-то комбинации, как это.

<select ng-options="foo.blah for foo in foos" ng-model="selection"></select> 
<li ng-repeat="obj in objects|filter:selection|filterFunction">{{obj}}</li> 

.filter('filterFunction', function() { 

    return function (objects) { 

    var filter_objects = []; 

    for (var i = 0; i < objects.length; i++) { 
     for (var j = 0; j < objects[i].weights.length; j++) { 
     if (objects[i].weights[j].name === "Raised Panel") { 
      filter_objects.push(objects[i]); 
     } 
     } 
    } 

    return filter_objects; 

    } 
});