What is the most effective method for rearranging the sequence of divs with Angular?

In my HTML code, I have three divs each with unique content.

There is a sequence object that dynamically changes the order in which the divs are displayed.

The sequence object looks like this: { "div1": 1, "div2": 3, "div3": 2 }

To arrange the divs according to the sequence object, I attempted using ng-if by creating 9 divs.

<div ng-if="sequence.div1=1"></div>
<div ng-if="sequence.div2=1"></div>
<div ng-if="sequence.div3=1"></div>
<div ng-if="sequence.div1=2"></div>
<div ng-if="sequence.div2=2"></div>
<div ng-if="sequence.div3=2"></div>
<div ng-if="sequence.div1=3"></div>
<div ng-if="sequence.div2=3"></div>
<div ng-if="sequence.div3=3"></div>

I'm wondering if there is a more efficient way to achieve this layout without having to use 9 individual divs.

htmlcssangularjs

Answer №1

To achieve this layout, utilize CSS's flexbox and apply ng-class to set the order of the div based on a specified condition.

Your HTML structure should be as follows:

<div class="wrapper-div">
   <div ng-class="{'order-1': sequence.div1==1, 'order-2': sequence.div1==2, 'order-3': sequence.div1==3}">
      Content for div one
   </div>
   <div ng-class="{'order-1': sequence.div2==1, 'order-2': sequence.div2==2, 'order-3': sequence.div2==3}">
      Content for div two
   </div>
   <div ng-class="{'order-1': sequence.div3==1, 'order-2': sequence.div3==2, 'order-3': sequence.div3==3}">
      Content for div three
   </div>
</div>

The corresponding CSS style rules are as follows:

.wrapper-div {
    display: flex;
    flex-direction: column; //flex-direction may not work in IE, it is fine in this case since child elements are divs or provide 100% width to child elements
}

.order-1 {
   order: 1;
}

.order-2 {
   order: 2;
}

.order-3 {
   order: 3;
}

Answer №3

Transform your sequence into an Array:

const sequence = [{'step': 'step-1'}, {'step': 'step-2'}, {'step': 'step-3'}];

Next, integrate it into your HTML:

<div ng-repeat="element in $scope.sequence" ng-class="{element.step}">
</div>

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

Using AngularJS to connect a directive with a controller function

After updating my records, I am looking to trigger a controller function from a directive. Below is the code snippet being used: Controller.js app.controller('GetAlphabetical', function ($scope, $http) { function getCutomers() { ...

jqueryangularjsangularjs-directive

The colors of my SVG button remain constant and do not dynamically change when I hover over it

I am facing an issue with a button that contains an SVG element. In my CSS, I have defined styles to change the color of the icon and the SVG when hovered over. However, I noticed that I have to directly hover over the SVG itself for the color to fill. As ...

htmlcsssvgbuttonhover

Substitute the outdated body element with the freshly loaded element

Using ajax with .load() to load page contents. The formatting of my HTML pages is as follows: For the home page: <html> <head></head> <body class="HOME"> <header></header> <div id="content"> // ...

jquerycssajax

When you hover over them, Material UI icons shrink in size due to the Border

I've been working on a React application that includes Material UI icons in the header. My goal is to add a border at the bottom of each icon when hovered over, but currently, the borders are too close to the icons. Another problem I'm facing is ...

javascripthtmlcssreactjsmaterial-ui

Seeking instructions on incorporating multiple components in a tab section effectively?

I am currently using a tab system that functions flawlessly. As I delve into learning VueJs, one concern has arisen in my mind about components and/or templates: Using the analogy of tab windows, how can I incorporate two components within a single tab, s ...

htmlvue.js

The functionality of switching between two layouts using a JavaScript button is currently not functioning

My concept involves implementing a switch that alternates between displaying a bootstrap carousel and cards. Essentially, one of them will be visible when the button is pressed while the other remains invisible. Initially, I am attempting to hide my existi ...

javascripthtmlcss

I am interested in incorporating various forms within this code

I followed an online tutorial to create this code, and I've made some edits myself, mainly related to the buttons that display information. However, I'm still learning and struggling with adding different forms to each section. I would really app ...

javascripthtmlcssdeployment

Vue.js fails to display multiple uploaded images

I have been working on implementing a multiple image upload feature using vue.js. So far, everything seems to be functioning correctly. However, I am facing an issue where the HTML does not display thumbnails of the images I have selected. Additionally, I ...

javascripthtmlimagevue.jsupload

Building Dynamic Row-Based Dropdowns in AngularJS UI-Grid

I'm currently developing a project that requires me to include dropdowns in a UI Grid, with the values for these dropdown options sourced directly from the database. How can I go about implementing this feature? Please provide code and HTML examples. ...

angularjsui-grid

Firefox causing line-height problem

Having an issue with styling a search button in Firefox. The input submit is created using an iconic font, white background, and border-radius as shown below: display: block; width: 60px; height: 60px; line-height: 60px !important; padding: 0; background: ...

htmlcssgoogle-chromefirefoxicon-fonts

Unusual AngularJS error encountered while performing calculations on object properties

After running a specific calculation in my code, I encountered an unexpected issue. if (typeof $scope.memoryTable[name][category]['total'] !== 'undefined') { $scope.memoryTable[name][category]['total'] = $scope.memoryTabl ...

javascriptangularjs

Tips for repairing damaged HTML in React employ are:- Identify the issues

I've encountered a situation where I have HTML stored as a string. After subsetting the code, I end up with something like this: <div>loremlalal..<p>dsdM</p> - that's all How can I efficiently parse this HTML to get the correct ...

javascripthtmlreactjsnext.js

How can I invoke prettyprint in AngularJs?

I am trying to incorporate the prettyprint plugin into my AngularJS application. However, I am encountering issues as I have created a basic directive and called the prettyPrint() method, but the code is not being properly formatted. FIDDLE: http://jsfid ...

angularjs

Is there a method to keep the color of navigation links active even when the cursor is not directly over the element?

In my navbar, I'm facing an issue where the color of the nav links returns to white when the hover cursor leaves the element. Is there a way to keep the color of the nav links even when the cursor is not on the hover elements? To illustrate, I've ...

htmlcssbootstrap-4

Issue within the application causing a sudden shutdown

I have been encountering an application error in my android phonegap app. The issue arises when I transition from one page to another page, resulting in the following message: "A network error occurred.(file:///android_asset/www/home/home.html?userid=91 ...

androidhtmlcordova

Establish Windows registry keys during the installation process of an electron application with the use of an MSI

When creating an MSI installer using electron-builder and installing it on a Windows 10 machine, I encountered the need to create some Windows registry entries. To address this, I followed the instructions in the electron-builder documentation and created ...

angularjspackage.jsonelectron-builder

Tips for adjusting an svg component to suit various screen sizes

I inserted the following SVG component into my HTML file. It fits perfectly on my tablet, but it's too large for my smartphone. How can we automatically adjust the size of the SVG to fit different screens? <svg viewBox="310 -25 380 450" w ...

javascripthtmlcssionic3

Does a CSS selector exist that targets every single element on a webpage?

Knowing about the asterisk as a wildcard in CSS is not new to me. My query is: Is there a CSS selector that targets every single element on a web page, including html, body, and all descendants? I have made attempts like: * { color: green; /*I used ...

css

The dropdown menu in the navigation bar is getting hidden behind the content

My simple navbar is currently functioning, but it's overlapping with other content. Both the navbar and main content elements use relative and absolute positions to function. I have tried adjusting position:absolute without success. The menu keeps ...

htmljquerycssflexboxcss-grid

Tips for extracting an SVG path from HTML structure

This example I'm referencing is by Chris Coyer <svg version="1.1" xmlns="http://www.w3.org/2000/svg" mlns:xlink="http://www.w3.org/1999/xlink" style="display: none;"> <defs> <g id="icon-image"> <path class="path1" d="M0 4v26h32v ...

htmlcsssvg