I want to show products in boxes as products are showing on other ecommerce sites.
I am using AngularJS ng-repeat
and bootstrap classes, but it is showing products in wrong style.
Here is my code:
<div class="row" id="grdDiv">
<div ng-repeat="category in groupMenuCategories">
<div class="col-md-3 col-lg-3" ng-repeat="grpMenuItem in category.menuItems">
{{grpMenuItem.itemName}}
</div>
</div>
</div>
Required Output on website:
item1 item2 item3 item4
item5 item6 item7 item8 . . .
Current Output:
item1 item4 item6
item2 item5 item7
item3 (no item) item8
(no item) - item9
You can use
to get 4 equal-width columns.
If you need each of 4 columns in seperate rows you can try the following
Demo
problem in your code was your menuItem is array therefore you have to get the value itemName this way
Updated plunker