Menu
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.
225
asked Feb 11 '26 07:02
So I think you need to make one small change to your data structure and then I adjusted your HTML a little I am able to use a custom class on texture. I hope this helps. Here is the Plnk
HTML
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<label>Thickness
<select ng-model="selected" ng-options="t.thickness for t in test.wood"></select>
</label>
<span ng-repeat="t in test.wood | filter:selected.thickness">
{{t.textures}}
</span>
</div>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.test ={
"cat": "Product Category",
"subcat_id": 1,
"cat_id": 1,
"ime": "Product Name",
"wood": [
{
"thickness": 10,
"value": 6.69,
"textures" : "texture100"
},
{
"thickness": 12,
"value": 8.19,
"textures" : "texture100"
},
{
"thickness": 16,
"value": 8.99,
"textures" : "texture100"
},
{
"thickness": 16,
"value": 9.99,
"textures" : "texture200"
},
{
"thickness": 16,
"value": 9.99,
"textures" : "texture300"
},
{
"thickness": 25,
"value": 14.29,
"textures" : "texture100"
},
{
"thickness": 28,
"value": 16.29,
"textures" : "texture100"
}
]
};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With