Ng-repeat for nested object without nested ng-repe

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.

标签： json angularjs nested ng-repeat

1条回答

Bombasti

2楼-- · 2019-07-22 03:52

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

});

0人赞添加讨论(0) 举报

Ng-repeat for nested object without nested ng-repe

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间