如何解析Angular中的嵌套中继器？

我在Angular中创建了一个商店，我有多个类别，每个类别都有产品。我想将每个类别划分为一个单独的div，然后在单独的div中列出每个产品。如何解析Angular中的嵌套中继器？

这是我想要的输出看起来像：

<div> 
 
    <h2>category1</h2> 
 
    <div>Product 1</div> 
 
    <div>Product 2</div> 
 
</div> 
 

 
<div> 
 
    <h2>category2</h2> 
 
    <div>Product 3</div> 
 
    <div>Product 4</div> 
 
</div>

这是我到目前为止有：

(function() { 
 
    var app = angular.module('store', [ ]); 
 

 
    app.controller('StoreController', function() { 
 
    this.items = products; 
 
    }); 
 
\t 
 
    var products = [{ 
 
    category1: [{ 
 
     name: "Product 1", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }, { 
 
     name: "Product 2", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }], 
 
    category2: [{ 
 
     name: "Product 3", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }, { 
 
     name: "Product 4", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }] 
 
    }]; 
 
})();

<!DOCTYPE html> 
 
<html ng-app="store"> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 

 
    <body ng-controller="StoreController as store"> 
 

 
    <div ng-repeat="category in store.items"> 
 
     <h2>{{category}}</h2> <!-- Category title here --> 
 
     <div ng-repeat="item in category">{{item.name}}</div> 
 
    </div> 
 
    
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.min.js"></script> 
 
    <script type="text/javascript" src="app.js"></script> 
 
    </body> 
 

 
</html>

Here's a Plunker

来源

2017-04-07 user13286

您plunker不行！ – Akashii

我知道，这就是我寻求帮助的原因。 – user13286

请参阅[此编辑的重击]（https://plnkr.co/edit/iS0BGXbhFDH7B6PR0XOm?p=preview）。我想你必须重写你的json/object来让它更有意义。你从一个只有一个项目的数组开始，这个数组又是一个对象而不是数组 – devqon

你ng-repeat应该是这样的：

<div ng-repeat="category in store.items[0]"> 
    <h2>category{{$index+1}}</h2> 
    <div ng-repeat="item in category"> 
     {{item.name}} 
    </div> 
</div>

这里的工作示例：

(function() { 
 
    var app = angular.module('store', []); 
 

 
    app.controller('StoreController', function() { 
 
    this.items = [{ 
 
    something: [{ 
 
     name: "Product 1", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }, { 
 
     name: "Product 2", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }], 
 
    category2: [{ 
 
     name: "Product 3", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }, { 
 
     name: "Product 4", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }] 
 
    }];; 
 
    }); 
 

 
    
 
})();

<!DOCTYPE html> 
 
<html ng-app="store"> 
 

 
<head> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="StoreController as store"> 
 

 
    <div ng-repeat="(key, category) in store.items[0]"> 
 
    <h2>{{key}}</h2> 
 
    <!-- Category title here --> 
 
    <div ng-repeat="item in category"> 
 
     {{item.name}} 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2017-04-07 14:38:40 tanmay

真棒，谢谢！ – user13286

@ user13286很高兴我能帮忙！请标记为已接受的答案..谢谢:) – tanmay

对于'h2'有没有什么方法可以获取类别的实际名称，而不是硬编码单词“category”，然后在数字上添加标签？ – user13286

我会建议在一个稍微不同的方式组织你的数据，以便它更容易解析。

的javascript：

(function() { 
    var app = angular.module('store', [ ]); 

    app.controller('StoreController', function() { 
     this.categories = categories; 
    }); 

    var categories= [ 
     { 
     name: "Category 1", 
     products: [{ 
      name: "Product 1", 
      description: "Lorem ipsum dalor sit amet" 
     },{ 
      name: "Product 2", 
      description: "Lorem ipsum dalor sit amet" 
     }], 
    },{ 
     name: "Category 2", 
     products: [{ 
      name: "Product 3", 
      description: "Lorem ipsum dalor sit amet" 
     },{ 
      name: "Product 4", 
      description: "Lorem ipsum dalor sit amet" 
     }], 
    }]; 
})();

HTML：

<!DOCTYPE html> 
<html ng-app="store"> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    </head> 

    <body ng-controller="StoreController as store"> 

    <div ng-repeat="category in store.categories"> 
     <h2>{{category.name}}</h2> 
     <div ng-repeat="product in category"><h4>product.name</h4></div> 
    </div> 

    </body> 

</html>

https://plnkr.co/edit/Wr83nz47aUJpSQgSaHL3?p=preview

来源

2017-04-07 14:45:19 jspurim

如何解析Angular中的嵌套中继器？

回答

相关问题