Tips on retaining the value of $index in ng-repeat and storing it within the array

I currently have a cart for shopping.

The code for the "add to cart" function looks something like this (shortened):

    "add" : function(code) {
            codes.push({
                "id"            : code.id,
                "order"         : "N/A",
                "name"          : code.name,
                "code"          : code.code,
                "image"         : code.image,
                "custom_made"   : 0,
                "quantity"      : 1
            });
            this.store();
        }
    }

Currently, I am adding an option for customers to reorder their items in the cart. To achieve this, I am using ui-sortable. It allows clients to drag and drop products to arrange them as they prefer.

Now, I need to save that customized order within the product array itself.

I want to capture the $index used by the ng-repeat directive and save it using a similar function as above, but storing the $index in the code.order object.

Is there a way to accomplish this? I have searched extensively but have not found a method of accessing the $index outside the ng-repeat directive.

Answer №1

Check out the ui-sortable plugin designed for Angular. It automatically updates the model when items are re-ordered.

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

Compiling Vue.js without the need for a build tool

Vue.js is the framework I've chosen for my PHP + JS application, and I'm using the full build of Vue by directly including it via a script tag without any build tool. I'm now wondering how I can pre-compile my templates without relying on b ...

Angular 4/5 | Custom Dropdown Component

I have been working on a custom dropdown directive in Angular that I can attach to any DOM element. Below is the code for my directive: import { Directive, HostListener } from '@angular/core'; @Directive({ selector: '[appDropdown]' ...

Error encountered while attempting to save user to mongoose due to bcrypt issue

I am currently dedicated to expanding my knowledge in node and react through a tutorial. If you want to check out the repository, here is the link: While making a post request to /api/users/register, I encountered an error that seems to stem from an unde ...

Angular's implementing Controller as an ES6 Class: "The ***Controller argument is invalid; it should be a function but is undefined."

Struggling to create a simple Angular todo application using ES6. Despite the controller being registered correctly, I keep encountering an error related to the title when navigating to the associated state. *Note: App.js referenced in index is the Babel ...

Auto-collapse sidebar upon clicking anywhere on the page

I have a dynamic sidebar that appears when the user clicks on a hamburger button. Here is the layout: $('#nav-toggle').click(function() { if($('#nav-toggle').hasClass('active')){ $('.menu').animate({ r ...

Embed a YouTube video within the product image gallery

Having trouble incorporating a YouTube video into my Product Image Gallery. Currently, the main product photo is a large image with thumbnails that change it. You can see an example on my website here. Whenever I attempt to add a video using the code below ...

What is the equivalent of defining conditional string types in Typescript similar to flow?

type UpsertMode = | 'add' | 'update' | 'delete'; interface IUpsertMembers { mode: UpsertMode; } const MagicButton = ({ mode: UpsertMode }) => { return ( <button>{UpsertMode}</button> ); } const Upse ...

classes_1.Individual is not a callable

I am facing some difficulties with imports and exports in my self-made TypeScript project. Within the "classes" folder, I have individual files for each class that export them. To simplify usage in code, I created an "index.ts" file that imports all class ...

Ways to reload a webpage from the bottom without any animation

It seems common knowledge that refreshing a webpage on mobile devices can be done by pulling down from the top. However, I am looking to shake things up and refresh the page by pulling up from the bottom instead. And I prefer no animations in the process. ...

Using CKEditor in an AngularJS web application: Tips and tricks

I'm having trouble integrating the ckeditor into an HTML page that's built with angularjs. Despite trying out numerous examples, such as the ng-ckeditor and ckeditor directives, I haven't found a solution that works for me. What I need is ...

Reinvent the AJAX functionality

Is there a way to create a custom function that changes the default ajax functionality? I currently have this ajax function implemented: $.ajax({ type: "POST", url: "http://" + document.location.host + '/userajax', data: 'type= ...

The price filter slider is experiencing issues with the onresize function not functioning properly

I am facing an issue with a price filter I developed for my project. Despite having coded it, the filter is not functioning properly. <div class="price_range_caption"> <span class="currency_from">Rs.</span><span id="price_range_f ...

Switch out the image in the dropdown and update the button once it is selected

In this scenario, I am looking to dynamically change the image in a button dropdown when it is clicked. The goal is for the dropdown image to swap and replace with the actual one upon clicking. For reference, here's the fiddle: https://jsfiddle.net/32 ...

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

Is there a way to delay the loading of a function or page until after an animation has finished running in JavaScript, HTML, and CSS only? For instance, I'd like to run an animation first and then have a different website or content load afterwards fo ...

Is it truly necessary to remove packages from devDependencies to improve performance?

It is a common understanding that packages listed under devDependencies are typically not included in the final build. So why do we remove them for the sake of performance optimization? For instance, there are discussions about replacing Moment.js with a ...

Is there a way for me to insert a hook into the DOM after a promise has finished updating

Currently, I am tasked with maintaining a code snippet that resembles the following structure: {#await details} {#each values as value, i} <td id="{`${config.id}_${i}`}">{value}</td> {/each} {:then details_result} {#each de ...

Sending data from a JSP page to a JavaScript function

I am working on a script that dynamically adds text boxes based on a specific time interval. <script type="text/javascript> $(document).ready(function() { var data = $('#data').val(); var counter = 1; var d = new Date(); va ...

Can two different versions of a library be utilized simultaneously in NPM?

Currently, our Vue.js app is built with Vuetify v1.5 and we are considering transitioning to Vuetify 2.0. However, the process would involve numerous breaking changes which we currently do not have the resources to address for all components. Is there a wa ...

Utilizing JSONP callbacks in Dart

I've been struggling with implementing basic JSONP in Dart and I can't seem to figure it out. After reading this specific blog post along with another helpful resource, it suggests using window.on.message.add(dataReceived); to receive a MessageEv ...

Set a delay for an AJAX request using jQuery

Is it possible to incorporate a setTimeout function into this ajax call? Here's the code snippet: jQuery.ajax({ type : "POST", url : dir+"all/money/myFile.php", data : "page="+data.replace(/\&/g, '^'), suc ...