Ng-repeat用于没有嵌套ng-repeat的嵌套对象 [英] Ng-repeat for nested object without nested ng-repeat
问题描述
我为我的问题创建了以下代码: http://plnkr.co/edit/dkpFKU
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"}]
}
]
},
]
想法是对不同木材的厚度进行排序，然后从.json文件生成适合该厚度的所有纹理(以便用户可以在下一步中选择纹理).我的问题是嵌套ng-repeat的用法-因为这使我无法生成作为class ="large-block-grid-12"的纹理(我正在使用基础).还有其他方法可以生成选定厚度的纹理吗?我是否应该更改json结构?
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 ?
我是Angular和JS的入门者.
I'm complete begginer in Angular and in JS.
推荐答案
因此，我认为您需要对数据结构进行一些小的更改，然后对HTML进行一些调整，以便可以在纹理上使用自定义类.我希望这有帮助.这是 Plnk
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="angular.js@1.2.x" 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"
}
]
};
});
这篇关于Ng-repeat用于没有嵌套ng-repeat的嵌套对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
