私はこの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 を使用しており、すべての木材の種類を表示しています。weights
ng-filter のドキュメントを見てきましたが、オブジェクトに複数のプロパティがある場合に適用する方法がわかりません。
私の現在のng-repeat:
<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 を変更することがより理にかなっている場合は、JSON を変更することにもオープンです。
編集
これが私の解決策でした:
<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;
}