How to style an entire list using AngularJS ng-repeat

Creating an image grid view gallery using ng-repeat and CSS is proving to be a challenge. Here is the code I am currently working with:

<div class="grid-container" style="display:block;">
<ul class="rig columns-3" ng-repeat="element in elementsList track by $index">
    <li>
         <img ng-src='{{src_url}}' ng-click="routeTo('/')"/>            
    </li>                  
</ul>
</div>

The issue arises when trying to display 3 images per row using CSS. While hardcoding three <li> tags works perfectly, dynamically loading through ng-repeat results in only one image per row. It seems that the CSS styles are applied before the ng-repeat list, preventing the grid layout from forming as desired.

Any suggestions on how to correct this problem?

javascriptjqueryhtmlcssangularjs

Answer №1

It appears that in this code snippet, the <ul> element is being repeated three times instead of the <li> element.

To correct this, you can move the ng-repeat directive to the <li> element like so:

<ul class="rig columns-3">
    <li ng-repeat="element in elementsList track by $index">
         <img ng-src='{{src_url}}' ng-click="routeTo('/')"/>            
    </li>                  
</ul>

(And just a reminder, do you really need to use {{src_url}} or should it be {{element.src_url}} instead?)

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

Leveraging the -ms-filter feature in Internet Explorer 9 can enhance the browsing

Currently, I am using visual studio 2008 for developing a web application. The CSS version being used is 2.1 and the browser version is IE9. Due to the absence of the opacity property in CSS 2.1, I have resorted to utilizing -ms-filter to ensure my code fu ...

cssasp.netinternet-explorer

How to loop through an array in JavaScript using a for loop?

Currently, I am engaged in a CSRF lab exercise with the challenge of iterating through over 20 tokens. <script> var token = ["f23e7b8c79d33d39ea67f0062b2cdb23", "90b157ac841c5aa7854285ea225c18e3", "9a189a1ef6a01aae6a298a0594831b66"]; var arr ...

javascriptarraysloopsvariablespost

AngularJS - Dynamically change the placeholder value

<md-input-container class="md-block hide-error-space" flex="25"> <input required name="password" ng-model="password"> </md-input-container> Here is a form field where the user can enter their password. <md-input-container md-no-float ...

htmlangularjs

The $_POST variable is not filled with the information displayed in the payload

When submitting a form with AJAX, I am able to view the payload data using the developer tools in Chrome: ------WebKitFormBoundaryiwCAdpY9aJH3D9h9 Content-Disposition: form-data; name="datafixId" 666 ------WebKitFormBoundaryiwCAdpY9aJH3D9h9 Content-Dispo ...

phpjqueryajaxpost

Spinning cards in Bootstrap 4

Currently working on my own card design using Bootstrap v4, specifically utilizing rows and columns. Encountering an issue when attempting to stack the two sides of the card on top of each other. I have tried using position: absolute; but they disappear co ...

htmlcssbootstrap-4

What's the reason for the malfunction of  ?

How can I add space between firstname and lastname using   in my code? Despite setting the character set to utf-8, the space is not being rendered correctly. I even tried using tab space, but it didn't work as expected. export class AppCompone ...

htmlangulartypescriptecmascript-6

Having trouble with jQuery's .stop() not working properly while trying to implement an effect

I have a question regarding my jQUery code: setInterval(function() { var grayarrow = jQuery("ul#dropdowngray").parent(); var greenarrow = jQuery("ul#dropdown").parent(); grayarrow.effect('shake', { times:2 }, 100); greenarrow. ...

jqueryshake

Tackling JavaScript: Exploring Ternary Short Circuit and If Short Circuit

I am attempting to optimize the code by using a ternary operator to quickly return false. My understanding was that using a ternary in this scenario would have the same outcome as the if statement below it, which is to instantly return false if the lengths ...

javascriptconditional-operator

In TypeScript, how are angle brackets like methodName<string>() utilized?

Could someone please assist me in understanding why we use angular brackets <> in typescript? For example, I have provided some code below and would appreciate an explanation. export class HomePage { constructor(public navCtrl: NavController) ...

javascriptangularjstypescript

What is the best way to increase padding beyond p-5 for specific screen sizes?

I need help creating a webpage that is responsive in design. Below is a snippet of the specific section I am working on: <div class="container-fluid"> <div class="row p-3 p-lg-5"> <div class="col"&g ...

htmlcssbootstrap-5

Working with AngularJS: Managing the values of two separate submit buttons

I'm trying to create a form with two submit buttons that will determine whether the form is saved as a draft or as a correct submission. One solution I am considering is adding a value/property to the submit buttons, perhaps using the ng-model attrib ...

htmlangularjsforms

What is the process for including id parameters within the URL of an HTML page?

As I work on building a website with ReactJS and webpack, I encounter the need to access URL parameters. One specific challenge I face is creating a universal blog post view page that can be dynamically loaded based on the blog id parameter in the URL. Rat ...

javascripthtmlreactjs

Vue-Cookies Having Trouble Retrieving Cookies

I'm currently setting up an OAuth service between my Node.js back-end and Vue front-end. Right now, the back-end is functioning correctly; I can authenticate successfully with my google account and get redirected to the appropriate UI view after authe ...

javascriptnode.jsvue.jscookies

Utilizing Owl carousel in conjunction with bootstrap tabs

When integrating Owl carousel with Bootstrap tabs, I encountered an issue with the active class not being properly applied to the current active tab. This might be due to a conflict between the Owl carousel class and the tab active class. To illustrate the ...

jqueryhtmltabsbootstrap-4owl-carousel

Generate an image on Canvas using a URL link

I have a unique URL that generates canvas images with specific parameters. It functions properly when loaded in a browser. The final line of code is: window.location = canvas.toDataURL("image/png"); However, when attempting to use this URL from another ...

javascripthtmlcanvas

Angular 2: A guide to resetting dropdown and text values when changing radio button selections

When the user interface displays two radio buttons - one for YES and one for NO - and the user clicks on YES, a dropdown is shown. Conversely, if the user clicks on NO, a textbox is displayed. How can I clear the values in the dropdown and textbox when s ...

htmlcssangulartypescript

How can I create a CSS div with a 20px margin-top distance from the div directly above

Here is the code that I am working with: https://jsfiddle.net/kc94aq33/ I am looking to set the top margin of the .wrapper to be 20px from the bottom of the .header. Does anyone know how I can achieve this? ...

css

Real-time updates using Express.js and Redis

Looking for guidance on managing real-time changes from Redis in Express.js. I am in need of fresh data from Redis every time there is an update. Can someone provide a helpful example or solution for this? ...

javascriptexpress

Eliminating render-blocking CSS in PageSpeed - one stylesheet at a time

Currently, I am testing the best optimization practices for front-end development. As part of this process, I have utilized gulp and npm to merge and minify my CSS and JS files into a single all.min.css and js.min.css file. Upon analyzing my website using ...

htmlcssnpmgulppagespeed

Responsive design is key in ensuring that Bootstrap columns adjust accordingly

I am attempting to create a responsive block in the center of my webpage with the help of Bootstrap. However, I am having trouble getting the columns to respond correctly to my bootstrap setup. Can anyone point out what I might be doing wrong? <lin ...

htmlcssbootstrap-4