Prevent the movement of the first column in a table when rearranging rows up or down by utilizing

Feeling a bit stuck here, can't seem to figure out what I've missed.

I've managed to move up or down a row in a table, but I need the value of the cell in the first column to remain unchanged. Here's my code:

This is my HTML file:

<div ng-show="showStoppageTable" align="center" class="form-group-sm">
    <table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
        <thead>
            <tr>
                <th class="btn-info">serialNo</th>
                <th class="btn-info">Stoppage Name</th>
                <th class="btn-info">Description</th>
                <th class="btn-info">Route order</th>
                <th class="btn-info">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="stoppage in StoppageData">
                <td>{{ stoppage.orderId }}</td>
                <td>{{ stoppage.stoppageName }}</td>
                <td>{{ stoppage.description }}</td>
                <td>
                    <div class="floating-buttons" align="center">
                        <button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
                        <button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
                    </div>
                </td>
                <td>
                    <div class="floating-buttons" align="center">
                        <button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.deleteStoppage(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>                                      
                    </div> 
                </td> 
            </tr>
        </tbody> 
    </table>

And here's my ctrl.js file:

vm.ForMoveUp = function (rowIndex) {
    var StoppageData = $scope.StoppageData;
    if (rowIndex > 0) {
        var temp = StoppageData[rowIndex - 1];
        StoppageData[rowIndex - 1] = StoppageData[rowIndex];
        StoppageData[rowIndex] = temp;
        $scope.rowIndex--;
    }
}

vm.ForMoveDown = function (rowIndex) {
    var StoppageData = $scope.StoppageData;
    if (rowIndex < StoppageData.length - 1) {
        var temp = StoppageData[rowIndex + 1];
        StoppageData[rowIndex + 1] = StoppageData[rowIndex];
        StoppageData[rowIndex] = temp;   
    }      
}

Answer №1

If you're searching for a solution where the stoppageName and description should move when Up/Down is clicked, but the orderId remains unchanged, check out this code snippet:

    vm.ForMoveUp = function(rowIndex) {
       var StoppageData = $scope.StoppageData;
       if (rowIndex > 0) {
           var temp = StoppageData[rowIndex - 1];
           StoppageData[rowIndex - 1].stoppageName = StoppageData[rowIndex].stoppageName;
           StoppageData[rowIndex - 1].description = StoppageData[rowIndex].description;
           StoppageData[rowIndex].stoppageName = temp.stoppageName;
           StoppageData[rowIndex].description = temp.description;
           $scope.rowIndex--;
       }
   }

   vm.ForMoveDown = function(rowIndex) {
       var StoppageData = $scope.StoppageData;
       if (rowIndex < StoppageData.length - 1) {
           var temp = StoppageData[rowIndex + 1];
           StoppageData[rowIndex + 1].stoppageName = StoppageData[rowIndex].stoppageName;
           StoppageData[rowIndex + 1].description = StoppageData[rowIndex].description;
           StoppageData[rowIndex].stoppageName = temp.stoppageName;
           StoppageData[rowIndex].description = temp.description;
       }
   }

If this meets your needs or if you have any other specifications in mind, feel free to let me know.

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

having difficulty with an intricate flexbox grid within another flexbox

I attempted to create a grid-like pattern using a negative margin based grid system (Susy) but was unsuccessful. Next, I tried employing flexbox for the task. However, I'm unsure if it's achievable. My initial idea was to have 2 columns (side A ...

Searching for data between two specific dates can be achieved in Laravel Vue by utilizing the filter

I've successfully implemented a search feature for normal fields in my form. However, I'm encountering difficulty when trying to search within a date range. Here's my controller code: public function index() { $query = Matter::query(); $qu ...

Problem with Jsdom retrieving document

I am struggling to utilize jsdom for loading a local HTML file. Here is the code snippet: var config = { file: "filename", scripts: ["node_modules/jquery/dist/jquery.min.js"], done: function(err, window){ con ...

Extract the Date portion from a DateTime object in ASP.NET MVC

I am currently facing an issue with a property in my Model [Display(Name = "День рождения")] [DataType(DataType.Date)] public System.DateTime Birthday { get; set; } When trying to save the value to the database using AJAX, it is also ...

Having trouble launching an AngularJS website within a Docker container

I am currently working on running my angular site within a docker container using boot2docker. The structure of the Dockerfile is as follows: FROM ubuntu:14.04 RUN sudo apt-get update RUN sudo apt-get install -y npm # Setting the directory for commands ...

JavaScript: Retrieve the Number of Subscribers on the BroadcastChannel

Is there a way to check if a Broadcast channel exists and see how many subscribers it has? We have a product link, and some Chrome tabs are subscribed to a Broadcast channel. We want to determine the number of listeners. const bc = new window.BroadcastCha ...

Struggling to achieve proper alignment for a series of div tags

I have implemented a code block to read in an image pixel by pixel and display it as a series of div tags arranged in a table-like fashion. The code is mostly inspired by a comment on PHP.net (http://www.php.net/manual/en/function.imagecolorat.php). This i ...

Issue with Bootstrap 5 navbar dropdown: It opens easily but struggles to close

I am currently using Bootstrap 5 to design a website and have incorporated a dropdown feature into the navigation bar. On desktop, when hovering over the dropdown, it should open, while on mobile, clicking the dropdown should toggle its visibility (open/cl ...

Is ng-repeat failing to bind values in the Dom?

When loading data dynamically to ng-repeat, I am encountering an issue where the data is not binding to ul. Typically, this can happen with duplicate indexes, but in my case I'm unsure of what's causing it. Any suggestions? main.html <div> ...

The JQuery-AJAX script in my Django application, intended to show a preset value in a calculated field, is not functioning as expected

Here are a couple of models from my project: class Package(models.Model): patient=models.ForeignKey(Patient, on_delete=CASCADE) diagnosis=models.ForeignKey(Diagnosis, on_delete=CASCADE) treatment=models.ForeignKey(Treatment, on_delete=CASCADE) ...

What is the process for including the posting date in the JSON format while using the Instagram

Struggling to incorporate the date into my JSON Instagram feed has been a challenge for me. For reference, here is a demonstration on JSFiddle: http://jsfiddle.net/galnova/p74jy3sk/ The following code snippet includes the commented-out section related to ...

Issue with Angular UI-Router nested views: Content not displaying

I'm attempting to incorporate nested views for a webpage using angular ui-router. I have set up the state definitions according to various tutorials, but I am unable to display any content in the child views. Surprisingly, there are no errors showing ...

Click event triggers nested bootstrap collapse

As a beginner in bootstraps and coding, I am currently experimenting with opening the main bootstrap panel using an onclick event that includes nested sub panels. Here is my index.html file containing the panels and the button; <link href="https://m ...

Easily Update Your Div Content by Simply Clicking a Single Link/Button

I am in need of assistance here. My goal is to display dynamic content within a div. Below you will find the code I currently have: <script type="text/javascript"><!-- function AlterContentInContainer(id, content) { var container = documen ...

ReactStrap: If the dropdown list is too long, users may have trouble viewing the final values

Currently, I'm facing an issue with a dropdown list that is taking up the entire screen and hiding some items. Here's the code snippet for reference: const statusSearchDropDownValues = ( <Row className="align-items-center"> <Col c ...

Utilizing JQuery and Jade to extract and display information from a Node.js server

I am currently working with the Jade framework for frontend and using Node.js & express for backend development. When rendering a view with data, I am encountering an issue where I can't access this data using JQuery. Below is my service in Node.js ...

Completing online form text entries in WebView without the need for identifying elements

I am currently working on a project to automate filling out an online login form using local string variables. This is the progress I have made so far: web = (WebView) findViewById(R.id.webview); WebSettings webSettings = web.getSettings() ...

What is the best way to extract information from the response of a fetch request in JavaScript using Express and Node.js

Currently, my script code resides in the index.html file, which I understand is not the ideal location. However, I am in the process of getting it to work before relocating it. readOperaciones(); async function readOperaciones(){ try{ ...

AngularJS Component enthusiasts

While going through a tutorial on the Angular UI Router GitHub page (link: https://github.com/angular-ui/ui-router), I came across an intriguing code snippet: var myApp = angular.module('myApp', ['ui.router']); // For Component users, ...

A stylish flyout menu with a sleek li background in jquery

Experimenting with http://tympanus.net/Tutorials/CufonizedFlyOutMenu/, I decided to remove the fly-in descriptions and am now attempting to load the extra li with a style that will "highlight" the li.current-menu-item element. An object is set up as follo ...