Ordering SVG Elements with ng-repeat in AngularJS

Trying to sort or reverse a list of <g> elements using Angular's ng-repeat directive is causing rendering order issues for me. I've created a plunkr to demonstrate the problem: http://plnkr.co/edit/f2pgSq?p=preview

I'm looking to utilize Angular's orderBy and filter extensively. Can anyone provide some insight into what I might be missing? Thank you in advance.

Answer №1

The issue lies in the code snippet

ng-attr-y="{{y + (item.id - 1) * (h + 6)}}"
within the <rect ng-repeat...> element.

To resolve this, update it to:

ng-attr-y="{{y + $parent.$index * (h + 6)}}" 

The correct approach is to utilize the $index of the parent repeater rather than the id as using ids may result in their reversal.

View Demo

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

AngularJS 1.2 and how to display form validation messages

I have been attempting to implement validation messages for a required input field using AngularJS 1.2. Most of the examples I come across are for versions higher than 1.2 and utilize ng-messages. I tried accessing formControl and checking the form obj ...

Functioning properly on Firefox, Bootstrap modal encounters issues on Chrome

The following code snippet demonstrates closing one modal, opening another, and executing a parsing function upon button click: $('#BtnUpCsv').on('click', function (e) { $('#csvModal').modal('hide'); $(&a ...

Preventing the execution of JavaScript methods with the use of the button and POST method

Unraveling this mystery: <button onclick:"javascript:cerrarPop('lightA')">Cancelar</button> fails to trigger any action. The idea of placing the button inside the post crossed my mind, but alas, the page undergoes a refreshing episode ...

Using Three.js to send an array of textures to a shaderMaterial

Query: How can I efficiently pass and access a list of textures in shaders, specifically targeting the nth texture within a fragment shader based on a varying value passed from the vertex shader? In my current project involving a Three.js scene, I am task ...

What is the best way to create a button with this functionality?

In the form that I have created, it is opened in a bootstrap modal style. This form contains a button that, when clicked, triggers an alert box to appear. The code snippet used for this functionality is as follows: echo "<script>"; echo "alert(&apos ...

Utilizing jQuery to choose an element by simply clicking on it

I am interested in creating an extension that allows users to click on an element and have the ability to remove it. This concept was inspired by the functionality of the "Console" in the "Inspect" feature of Chrome. The process would involve clicking on ...

Styling for Print Media: Adjusting the horizontal spacing between inline elements

I have been developing a custom AngularJS point-of-sale (POS) system that requires printing receipts upon completing a sale. To achieve this, I am using ng-print to print out a sales summary displayed within a specific div element after hiding all other un ...

Add or remove an ID from the swatch gallery based on its presence or absence

I'm currently working on a handleClick function for a gradient swatch gallery. The goal is to add an id of "bg-gradient" to the clicked element, and if another swatch is clicked, remove that id from the previously clicked swatch and add it to the newl ...

Ensure that the text input box is positioned at the bottom of the chatbox and enable scrolling

Is there a way to make the textbox stay fixed at the bottom of the chatbox, regardless of how many messages are present? Currently, it appears after the last message. Additionally, I would appreciate assistance in implementing a scroll feature that automat ...

Accessing global variables is prohibited for Javascript

I currently have a global variable named calculated_price that stores the price of a specific product. This global variable's value is modified by one function, and then passed to a server via an AJAX post request by another function: var calculated_ ...

The popup box must remain open if a user encounters an issue while filling out their signup form

This php code is effectively displaying error messages. However, an issue arises when the popup box does not remain open if there are errors in the registration form. For example, clicking a link opens a popup box containing a registration form with mandat ...

Executing a script programmatically using an NPM package

I'm in the process of developing a package that relies on an external command tool called plop js. In my package.json, I aim to include a binary that points to an index.js file. "scripts":{ "plop": "plop" }, "bin": { "my-command": "ind ...

What is the best way to implement a callback function in JavaScript?

I am looking to update this code to incorporate a callback function. My goal is for the program to first call DynamicLoadScriptForEdit(), followed by calling ExecuteScriptForEdit. Unfortunately, my current implementation is not working as expected. window ...

Tips for transferring variables in Ajax.BeginForm

Hi there! I am new to C # and I have a question about passing a string variable from C# to a function called PostFailure in JavaScript. The issue I'm facing is that the function seems to be returning some object and I am not sure where it is coming fr ...

Deliver dynamic JavaScript files using Node.js

Query: Is there a way to serve a JavaScript file dynamically, where certain variables can be changed based on parameters passed in the URL? I'm looking for a solution similar to using an HTML Jade template but for pure JavaScript. Situation: Imagin ...

Issue - Following error occurred in the file connection.js located in node_modules/mysql2 library: Module not found: Unable to locate 'tls' module

I've encountered an error in our Next JS applications where tls is not found. I have tried several troubleshooting steps including: 1. Updating Node modules 2. Using both mysql and mysql2 3. Running npm cache clean --force 4. Removing node_modules di ...

Utilizing ng-repeat to iterate over a nested array

I need help figuring out how to properly loop through a JSON array and its ingredients/directions array using ng-repeat. The current method I have attempted is not working as expected. Any suggestions or advice would be greatly appreciated! Thank you. Con ...

What's the best way to incorporate necessary styles into text using particular fonts?

Is there a way to set letter spacing and word spacing for text on my website with the font 'classylight'? Adding classes to each post in the site map seems like a lengthy process. To save time, I attempted to use the attribute*=style property to ...

Exploring the differences between a callback function and an asynchronous

In the code snippet below, I have implemented handling for SIGINT and SIGTERM signals in a node.js application. // quit on ctrl+c when running docker in terminal process.on('SIGINT', async () => { console.info('Got SIGINT (aka ctrl+c in ...

Implementing AJAX to seamlessly add comments in real time!

I have set up a commenting system on my website using two PHP files: index.php and insert.php. The index.php file contains a form where users can input their comments, which are then displayed on the page through an echo statement after being stored in the ...