Question

我为我的问题创建了以下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”（我正在使用基础）。有没有其他方法来生成所选厚度的纹理？我应该改变json结构吗？

我是Angular和JS的完成者。

Answer 1

所以我认为你需要对你的数据结构做一个小的改动，然后我调整你的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>

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重复，没有嵌套的ng-repeat

1 个答案: