无嵌套 ng-repeat 的嵌套对象的 Ng-repeat [英] Ng-repeat for nested object without nested ng-repeat
问题描述
我为我的问题创建了以下 plunker:http://plnkr.co/edit/dkpFKU
<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="product.textures 中的tex3"><h6 class="center"><small>{{tex3.texture}}</small>$scope.products = [{"cat": "产品类别",subcat_id":1，"cat_id": 1,"ime": "产品名称",木头": [{厚度":10，价值":6.69，纹理":[{纹理":纹理100"}]},{厚度":12，价值":8.19，纹理":[{纹理":纹理100"}]},{厚度":16，价值":8.99，纹理":[{纹理":纹理100"}]},{厚度":16，价值":9.99，纹理":[{纹理":纹理200"}]},{厚度":16，价值":9.99，纹理":[{纹理":纹理300"}]},{厚度":25，价值":14.29，纹理":[{纹理":纹理100"}]},{厚度":28，价值":16.29，纹理":[{纹理":纹理100"}]}]},]
我们的想法是根据厚度对不同的木材进行分类，然后从 .json 文件中生成适合该厚度的所有纹理(以便用户可以在下一步中选择纹理).我的问题是嵌套 ng-repeat 的使用 - 因为这会阻止我将纹理生成为 class="large-block-grid-12" (我正在使用基础).有没有其他方法可以生成选定厚度的纹理?我应该更改 json 结构吗?
我完全是 Angular 和 JS 的初学者.
所以我认为你需要对你的数据结构做一个小的改变，然后我稍微调整了你的 HTML 我能够在纹理上使用自定义类.我希望这有帮助.这是 Plnk
HTML
<头><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 src="app.js"></script><body ng-controller="MainCtrl"><标签>厚度<select ng-model="selected" ng-options="t.thickness for t in test.wood"></select> {{t.textures}}</span></html>
app.js
var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {$scope.name = '世界';$scope.test ={"cat": "产品类别",subcat_id":1，"cat_id": 1,"ime": "产品名称",木头": [{厚度":10，价值":6.69，纹理":纹理100"},{厚度":12，价值":8.19，纹理":纹理100"},{厚度":16，价值":8.99，纹理":纹理100"},{厚度":16，价值":9.99，纹理":纹理200"},{厚度":16，价值":9.99，纹理":纹理300"},{厚度":25，价值":14.29，纹理":纹理100"},{厚度":28，价值":16.29，纹理":纹理100"}]};});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.
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屋！
