我为我的问题创建了以下 plunker: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"(我正在使用 foundation)。还有其他方法可以生成选定厚度的纹理吗？我是否应该更改 json 结构？
我完全是 Angular 和 JS 的初学者。
最佳答案
所以我认为您需要对您的数据结构做一点小改动，然后我稍微调整了您的 HTML 我可以在纹理上使用自定义类。我希望这有帮助。这是 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>
应用程序.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"
}
]
};
});
关于json - 没有嵌套 ng-repeat 的嵌套对象的 Ng-repeat，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26532207/