Json 无嵌套Ng重复的嵌套对象的Ng重复_Json_Angularjs_Nested_Ng Repeat

Json 无嵌套Ng重复的嵌套对象的Ng重复

json angularjs

Json 无嵌套Ng重复的嵌套对象的Ng重复,json,angularjs,nested,ng-repeat,Json,Angularjs,Nested,Ng Repeat,我为我的问题创建了以下plunker： {{tex3.texture} $scope.products=[ { “类别”：“产品类别”， “子类别id”：1， “cat_id”：1， “输入法”：“产品名称”， “木头”：[ { “厚度”：10， “价值”：6.69， “纹理”：[{“纹理”：“纹理100”}] }, { “厚度”：12， “价值”：8.19， “纹理”：[{“纹理”：“纹理100”}] }, { “厚度”：16， “价值”：8.99， “纹理”：[{“纹理”：“纹理1

我为我的问题创建了以下plunker：




{{tex3.texture}


$scope.products=[
{
“类别”：“产品类别”，
“子类别id”：1，
“cat_id”：1，
“输入法”：“产品名称”，
“木头”：[
{
“厚度”：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”（我使用的是foundation）的形式生成纹理。是否有其他方法来生成选定厚度的纹理？？我是否应该更改json结构

我在角度和JS方面完全是个乞丐

所以我认为你需要对你的数据结构做一个小小的改变，然后我稍微调整了你的HTML，我可以在纹理上使用一个自定义类。我希望这有帮助。这是你的电话号码

HTML

我希望避免嵌套ng repeat的主要原因是我希望列表以水平方式输出数据。这些纹理实际上是像画廊一样水平堆叠的图像。您的解决方案使用div-ng repeat作为父项，这会再次导致每个li项转到它自己的行，除非我在css中遗漏了什么？在代码中使用

而不使用

可能不是正确的方法，但它可以完成模板的工作。我猜你的问题不是很清楚，你说你不能上课。让我看看我能用水平ng Repeat找出什么。我用你的纹理水平更新了我的答案。我不得不稍微修改一下你的数据和代码。太棒了，这解决了这个问题。是的，现在我回顾了我最初的问题，也许我不清楚（我想指出来自基金会的大块网格类），谢谢你的帮助。也许只是为了添加到您的解决方案中——在我的代码中，我使用了“厚度上的唯一过滤器”下拉列表，以便相同的厚度值不会重复。唯一筛选器是以下内容的一部分：

<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"}]
                }
            ]
},

]

<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>

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"
                }
            ]
  };

});