i created following plunker for my problem: http://plnkr.co/edit/dkpFKU
<body ng-controller="MainCtrl">
<select ng-model="selected" ng-options="t.thickness for t in products[0].wood"></select>
<div ng-repeat="product in products[0].wood |filter:{'thickness': selected.thickness}" >
<ul>
<li ng-repeat="tex3 in product.textures">
<h6 class="center"> <small>{{tex3.texture}}</small> </h6>
</li>
</ul>
</div>
$scope.products = [
{
"cat": "Product Category",
"subcat_id": 1,
"cat_id": 1,
"ime": "Product Name",
"wood": [
{
"thickness": 10,
"value": 6.69,
"textures" : [{"texture" : "texture100"}]
},
{
"thickness": 12,
"value": 8.19,
"textures" : [{"texture" : "texture100"}]
},
{
"thickness": 16,
"value": 8.99,
"textures" : [{"texture" : "texture100"}]
},
{
"thickness": 16,
"value": 9.99,
"textures" : [{"texture" : "texture200"}]
},
{
"thickness": 16,
"value": 9.99,
"textures" : [{"texture" : "texture300"}]
},
{
"thickness": 25,
"value": 14.29,
"textures" : [{"texture" : "texture100"}]
},
{
"thickness": 28,
"value": 16.29,
"textures" : [{"texture" : "texture100"}]
}
]
},
]
The idea is to sort different wood on their thickness and then generate all the textures from .json file that fit that thickness (so that user can select texture in next step). My problem is the usage of nested ng-repeat - since this prevents me from generating textures as class="large-block-grid-12" (i'm using foundation). Is there any other way to generate the textures of selected thicknes?? Should i maybe change the json structure ?
I'm complete begginer in Angular and in JS.