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

cssangularjsbootstrap-ui

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!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform the assurance into a JSON entity

Currently facing an issue with converting the promise returned by the service to the controller. My goal is to generate an array of JSON objects using the data within the promise. In the controller, this is what I'm receiving: https://i.stack.imgur.co ...

javascriptangularjsjsonangular-promise

A horizontal navigation bar featuring tabs that adjust their width automatically to ensure a consistent dimension across all

I'm aiming to create a horizontal menu that adjusts its width automatically to 100%. MY CSS .horizontal { width: 100%; } .horizontal ul { display: table; width: 100% } .horizontal li { display: table-cell; } .horizontal li a { height: 3 ...

csscss-float

What is the best way to showcase a container within a two-column layout?

Looking to showcase the content of two columns exclusively within a container, with each column spaning the full width of the page, just like the image below. Can this be achieved using css grid? Your assistance and support is greatly appreciated. < ...

htmlcsscss-grid

AngularJS consistently retrieves files regardless of the browser configurations

I'm facing an issue with my NodeJS application and AngularJS frontend. When a user requests a file, it is streamed from the node application to the angular frontend. However, the frontend always downloads the file, regardless of browser settings (e.g. ...

angularjsnode.jsexpress

Flex wrap is causing additional space within the layout

When using flex-wrap, if there are more textBoxes than the available width in the container, they shift to the next line. This is fine, but it leaves too much space between the button and the textBox. This spacing issue can make the layout look odd. I hav ...

htmlcss

Utilizing ion-list to showcase the subcategories of the chosen element

I'm currently developing an app that involves displaying a list of items. When a user selects an item, they are redirected to another page where a new set of items is listed with checkboxes for further actions. While I am able to select an item from t ...

angularjsionic-framework

The default value of the input color in HTML/NextJS does not update when changed

Issue: The color input does not change when the default value (#ffffff) is declared. https://i.sstatic.net/BpqUj.png However, it works normally if I don't declare a default value. https://i.sstatic.net/0dBd6.png Note: Using NextJS framework. <i ...

javascripthtmlcssreactjsnext.js

Unveiling Elements as You Scroll Within a Specified Area

I have implemented a jQuery and CSS code to reveal my contact form as I scroll down the page. However, I am facing an issue with setting a specific range for displaying the element while scrolling. Currently, I have only managed to handle the scrolling dow ...

javascriptjquerycsswordpress

Flawless Incorporation with RESTful API

While there are countless tutorials online demonstrating how to utilize ng-repeat with in-memory data, my situation involves a lengthy table with infinite scroll that retrieves data through requests to a REST API (scroll down - fetch data, repeat). This me ...

angularjsangular-servicesangular-filters

What causes the CSS class and jQuery to become unresponsive when rapidly moving the cursor over a specific selector while utilizing .hover(), .addClass() and .removeClass()?

After creating a customized h1 element, I implemented a feature where a class is added and removed from it with a smooth transition of 300ms when the mouse hovers over and off its parent DIV #logo. This was achieved using jQuery's .hover() method alon ...

jquerycssjquery-uijquery-selectorshover

Maximizing the potential of $urlRouterProvider.otherwise in angular js

I am encountering an issue with redirecting to the login screen when there is no UABGlobalAdminId in my storage. I have tried using $urlRouterProvider.otherwise but it doesn't seem to be functioning properly. When I attempt to debug, the console does ...

javascriptangularjsangularjs-routing

How can I use jQuery to vertically align an element?

Here's my website: Take a look here! I have a menu on the left column that I want to center. Take a look at the image below for a better understanding of what I'm trying to achieve. https://i.stack.imgur.com/ZzprT.png Here is the JavaScript c ...

javascriptjqueryhtmlcss

How to identify a request timeout when using $http in Angular?

I have a question about how to manage timeouts when making an http request using Angular. Here is the code snippet: $http({ url: url, params: params, method:'POST', headers: { 'Content-Type': 'application/x ...

angularjs

Tips for creating a fixed footer that adjusts with a flexible wrapper

Feeling incredibly stressed, I embarked on a quest to find the perfect sticky footer. After searching Google for what seemed like an eternity, I came across multiple tutorials recommending the use of min-height:100%. However, this approach caused the wrap ...

javascriptjquerycsssticky-footer

the pop-up modal function is malfunctioning

I can't get my pop up to work properly. When I click the button, the screen dims as if a pop up is going to appear, but nothing shows up. Can someone please assist me with this issue? Here is the HTML file: <!DOCTYPE html> <html lang="en"&g ...

javascriptjqueryhtmlcss

Learn how to mock $resource in AngularJS using $promise.then in your jasmine tests

I have a factory that utilizes Angular resource to fetch data from an API. I've developed a function called getObjectById within the service, which uses the factory to request a specific object by ID, then adjusts the object before returning it. Serv ...

angularjsunit-testingjasminepromise

Creating a unique Angular filter involves combining different techniques and functionalities to tailor

Hey there! I'm just diving into the world of Angular JS and I'm looking to filter any Twitter text that comes back containing a hashtag, and turn that word into a clickable link. For example: If the returned twitter text is "The quick brown #f ...

javascriptangularjsangularjs-directivefrontendangular-filters

Is there a way to create a JavaScript-driven search filter that updates automatically?

My website showcases a lineup of League of Legends champion icons, with one example shown below: <div class = "champion"> <p>Aatrox <img class = "face_left" src = "images/small/Aatrox.png"> <div class = "name" onmouseover="if(cha ...

javascriptjqueryhtmlcss

How to create ::after pseudo-element with identical width as its preceding sibling

My HTML code includes a <div> container with an <img> and an ::after pseudo-element. Check it out: <div class="container" data-caption="The caption should match the width of the image and wrap accordingly"> <img> </div> . ...

htmlcss

Having difficulty animating the height transition of the NextJS Image component

On my webpage, I have a headerbar that changes size (from 120px to 70px) when the user scrolls down. I successfully implemented this transition using Tailwind classes and a height transition. Now, I am trying to make the site logo resize along with the hea ...

cssreactjsnext.js