javascript - How to parse out nested repeater in Angular? -
i creating store in angular , have multiple categories products in each category. break out each category separate div , list out each product in separate div.
here want output like:
<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>here have far:
(function() { var app = angular.module('store', [ ]); app.controller('storecontroller', function() { this.items = products; }); 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 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>
your ng-repeat should this:
<div ng-repeat="category in store.items[0]"> <h2>category{{$index+1}}</h2> <div ng-repeat="item in category"> {{item.name}} </div> </div> here's working example:
(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 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>
Comments
Post a Comment