Ng-repeat for nested object without nested ng-repeat

问题

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.

回答1:

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

});

来源：https://stackoverflow.com/questions/26532207/ng-repeat-for-nested-object-without-nested-ng-repeat

标签

json

angularjs

nested

ng-repeat