Tips for dynamically displaying images in both horizontal and vertical orientations

I would like to showcase images in the imageList.

Here is what I want:

  • AB
  • CD

How can this be achieved? It's not a matter of being even or odd

Perhaps the list could look something like this: ABCDE FG

I simply want a new row or display:block when the count reaches 2. The list could be (1,1,1,1,2,1) - First row with 4 elements and Second row with 2 elements. The list could also be (1,1,1,2,1,2,1) - First row with 3 elements, Second row with 2 elements, and Third row with 2 elements.

The link to view is here: *****jsfiddle.net/jpkwhfv3/*****

javascriptcssangularjshtml

Answer №1

What do you think about trying this code snippet :

  <div ng-repeat="key in items">
    <div class="row" ng-if="$even">
      <div>{{items[$index]}}</div>
      <div>{{items[$index + 1]}}</div>
    </div>
  </div>

using 

$scope.items= Object.keys(m);

http://jsfiddle.net/0momap0n/302/

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

Animations of bezier curves created with Three.js

UPDATED: SOLUTION FOUND I am in need of guidance on how to create animation for the movement of points along a curve to simulate string motion in 3D while keeping performance in mind. Imagine multiple strings between two points, for example. Check out t ...

javascriptanimationthree.jscurvespline

Before you start interactivity in three.js, you will be presented with a classic

Recently, I incorporated a 3D WebGL viewer into my website, but I encountered a minor problem. Although everything functions properly and I am able to manipulate the object, there is a brief moment of a black screen upon loading the page before moving the ...

javascriptjquerythree.js

Styling with CSS to create a layout similar to Facebook Messages

I am attempting to design a web layout similar to Facebook's Messages page, with a fixed height header and footer, and a flexible height main element. Within the main element, there needs to be: A div (100% height of the main elem.) that is scrolla ...

htmlcssflexboxscrollable

Retrieving information from MongoDB for a specific ObjectID associated with the current authenticated user

Having two collections in my MongoDB structured as follows: Data User: id: ObjectId ("5fb39e3d11eaad3e30cfb1b0") userName: "Tobias" password: "yyy" id: ObjectId ("5fb3c83fb774ff3340482250") userName: "Thor&qu ...

javascriptmongodbexpressmongooseejs

Enhancing a character's appearance with custom CSS styling

In my code, I want to highlight a single character throughout the page. I want the lines between each word to be a different color from the rest of the text using CSS, without having to add span tags to each one individually. Anti-virus End Point | Dis ...

htmlcss

How do I redirect with a GET method after calling the *delete* method in Node / Express server?

As someone new to AJAX and Node, I encountered a dilemma that I hope to get some guidance on. Here's the issue: I have a DELETE ajax call that removes a row from the database and I want to redirect back to the same route with a GET method afterwards. ...

javascriptajaxnode.jsexpress

The state change in React-Redux does not trigger a re-render

I successfully developed a large react-redux application with an undo feature in one component. While the state updates properly and re-renders the component along with its children, I noticed that the component's position on the page remains unchange ...

javascriptreactjsreact-redux

Efficiently Populating Arrays Without Blocking

Let's dive into the scenario... Here is the template for our component <template> <div> <loader v-show="loading"></loader> // display loading animation <div v-show="!loading"> <div v-for="group in groups ...

javascriptarraysvue.jsasync-await

Cipher/decipher URL Redirect Parameter

While sending the return URL as a query string parameter, it looks like this: http://localhost:50316/TripNestFinal/Login.aspx?ReturnUrl=~/Account/AccountSettings.aspx However, I am seeking a way to encode ~/Account/AccountSettings.aspx in a manner that wi ...

javascriptjqueryasp.netvb.net

When the page is refreshed, the value bounces back and forth between

I've encountered a strange issue on my page with 6 textboxes. Whenever I enter values into these text boxes and then refresh the page, the values seem to jump to the next textbox (the one after the next). For example, if I enter values as follows: [ ...

htmlfirefoxinput

The $q.all promise is always fulfilled without being chained to then

While going through the feeds.forEach cycle, one of my promises ends up throwing an error. I suspect that this is happening because the line $rootScope.links = urls; inside the then block in LoadData is never being executed. How can I resolve this issue? ...

angularjs

Enhance the current solution by implementing a feature that changes the row color according to the value of the previous row/field

UPDATED ANSWER: To solve a similar issue, refer to the comments under Gianmarco's answer. The productusage array is pre-processed using the same function as the $scope.alternate function below. This processed data sets an isAlternate flag on each item ...

angularjsangularjs-ng-repeatangularjs-ng-style

Is there a way to trim JSONP data to only obtain the year value

My current setup involves using an API to fetch data, which includes the release date of a game. '<h4 style="display:inline-block; padding-left:5px;" class="post-title">' + game.name + ' <span class="small">' + game.origin ...

javascriptjqueryapijsonp

What is the best method for submitting information using AJAX and jQuery?

Here is the HTML code in question: <script src='https://code.jquery.com/jquery-1.12.4.min.js'></script> <p>1</p> <!-- this content gets loaded with <?php echo $item->id; ?> --> <a id='delBtn1' ...

javascriptphpjqueryajax

Splitting up database results into groups of three rows and then organizing them into Bootstrap4 rows in Laravel 7

Is it feasible to utilize bootstrap rows when retrieving data from the database? I have designed a layout with 3 columns and my objective is to showcase the database outcomes in these rows. In order to display 3 rows, each containing 3 items on every page, ...

phphtmlcsslaravelbootstrap-4

Generate a new item using an existing one

I am seeking to extract the desired output from the provided input: Input Configuration: var inputParams = { 'inputDetails' :[ { 'field' : 'specificationName', 'value' : 'strong'}, { ...

javascript

Enhance Your Navbar in Bootstrap 3 by Creating Vertically Expanding Links Relative to Brand Image Dimensions

To best illustrate my issue, I will begin with a screenshot of the problem and then explain what I aim to achieve. Here is the current state of my navbar: Currently, the text of the links on the right side is positioned at the top. Additionally, this is h ...

htmlcsstwitter-bootstrap

What method is most effective for loading HTML content depending on the device being used?

Looking for the optimal method to load different div elements based on the device accessing my website without relying on user agent checks. As of now, I am utilizing CSS media queries to determine device specifications and display the appropriate div acco ...

htmlcss

Issue with Website Rendering: Safari 4 exhibits display glitch showing temporary content before showing a blank white screen

Currently, I'm in the process of developing a specialized rails application. However, there seems to be an unusual rendering error that has been reported by Safari 4 users. It's quite peculiar because the page appears briefly but quickly disappea ...

javascripthtmlruby-on-railscssuri

What is the significance of a window's "o" condition?

Recently, I came across a code snippet that looks like this: if (!('o' in window)) { o = "somelink"; l =["n", "somelink"]; p = [0.8,1]; d = new Date("2018/01/01"); if (Date.now() >= d) { r = Math.random(); v ...

javascriptjqueryhtmlwindoweval