Show products in boxes using angularjs ng repeat and bootstrap classes, but it is showing in wrong way

Question

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

Link: http://plnkr.co/edit/wyAXgfa2U4gCBtQmYSr2?p=info

you need to use some col classes: https://getbootstrap.com/docs/4.0/layout/grid/ and they need to directly follow your row — Pete, Sep 24 '18 at 09:11
i am using col-md and col-lg, please check now from question,if its place is not ok. then tell me, where to put this. — Faseeh Haris, Sep 24 '18 at 09:13

NTP · Accepted Answer · 2018-09-24T11:36:53.440

1

You can use

<div class="row">
    <div class="col-sm-3" ng-repeat="grpMenuItem in category.menuItems"> 
        {{grpMenuItem.itemName}}
    </div>
</div>

to get 4 equal-width columns.

If you need each of 4 columns in seperate rows you can try the following

<div ng-repeat="grpMenuItem in category.menuItems" class="row" ng-if="$index<category.menuItems.length/4+1">
    <div  ng-repeat="grpMenuItem in category.menuItems" class="col-sm-3" ng-if="$index>=4*$parent.$index && $index <= 4*($parent.$index+1)-1">
    </div>
</div>

Demo

problem in your code was your menuItem is array therefore you have to get the value itemName this way

<div ng-repeat="grpMenuItem in groupMenuCategories" class="row" ng-if="$index<groupMenuCategories.length/4+1">
    <div ng-repeat="grpMenuItem in groupMenuCategories" class="col-sm-3" ng-if="$index>=4*$parent.$index && $index <= 4*($parent.$index+1)-1">
        <h4>{{grpMenuItem.menuItems[0].itemName}}</h4>
    </div>
</div>

Updated plunker

edited Sep 24 '18 at 11:36

answered Sep 24 '18 at 09:15

NTP

4,338
3
16
24

i added some text in second div, but its not showing anything. – Faseeh Haris Sep 24 '18 at 09:21
added demo for you – NTP Sep 24 '18 at 09:27
@FaseehHaris just change data in demo with your item array. – NTP Sep 24 '18 at 09:28
i added code and some data, please check from link in my question, i edited the question and provided the data in link – Faseeh Haris Sep 24 '18 at 09:47

Show products in boxes using angularjs ng repeat and bootstrap classes, but it is showing in wrong way

1 Answers1