Display items inside containers using angularjs ng repeat and bootstrap styles, however, the layout is not being rendered correctly

Question

Display items inside containers using angularjs ng repeat and bootstrap styles, however, the layout is not being rendered correctly

I am struggling to display products in boxes on my ecommerce website, similar to how they appear on other platforms.

Although I am utilizing AngularJS ng-repeat and bootstrap classes, the layout of the products is not coming out as intended.

Take a look at my current 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>

Desired Website Output:

item1 item2 item3 item4

item5 item6 item7 item8 . . .

Actual Current Output:

item1 item4 item6

item2 item5 item7

item3 (no item) item8

(no item) - item9

To view the issue live click here: http://plnkr.co/edit/wyAXgfa2U4gCBtQmYSr2?p=info

css angularjs bootstrap-ui

Answer 1

Answer №1

You have the option to utilize

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

for obtaining 4 columns of equal width.

If you prefer each of the 4 columns to be on separate rows, you can experiment with 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>

Check out the demo here!

The issue in your code stemmed from using menuItem as an array, hence you will need to access the value itemName in this manner:

<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>

View the updated plunker here!

Answer 2

You have the option to utilize

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

for obtaining 4 columns of equal width.

If you prefer each of the 4 columns to be on separate rows, you can experiment with 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>

Check out the demo here!

The issue in your code stemmed from using menuItem as an array, hence you will need to access the value itemName in this manner:

<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>

View the updated plunker here!

Display items inside containers using angularjs ng repeat and bootstrap styles, however, the layout is not being rendered correctly

Answer №1

Similar questions

I am experiencing an issue where my mobile responsive website consistently shows the smallest CSS width view. What could be the root of this

What is the reason behind the `h-full`/`height:100%` not completely filling the void within a div element?

How to center a label vertically within a button group using Bootstrap

Not prepped for EasyFB

Issue with function operation

CSS not adding space between elements when using line breaks

centering headers using tailwind styles

Issue with loading scripts in CodeIgniter, jQuery Mobile, and jQuery UI - scripts are not loading initially, requires a refresh to

Struggling to show labels in the correct position for each button?

Creating dynamic templates in AngularJS using ng-include and custom template directivesHow to implement dynamic

My goal is to eliminate the console error message "@ Angular: GET http://localhost:4200/assets/i18n/1/fr.json 404 (Not Found)" related to missing file

What is the best way to position an SVG background image at the bottom of a container?

Switch between multiple unordered lists (ul) so that when one list is clicked, the other lists reset to their initial state as though they were never

Enhance the bubble charts in Kendo UI Graph by adding dimension and depth to the bubbles for a more visually

Setting the column width and border-top in Highcharts

Whenever the 'something' is passed in $state.go, it fails to function as intended

Additional GET request made after update request

Angular ng-repeat failing to display data as expected

A custom class that uses toggleClass() does not trigger an alert upon a click event

Show only specific items in an AngularJS application