Transfer the elements from one array list to another array list

I need to duplicate the array list below 

$scope.medicinelist = [

{medicine: 'AMLOPRES 5MG TABLET'},
{medicine: 'ARGIPREG SACHET'},
{medicine: 'ALCIPRO 500MG TABLET'} ,
{medicine: 'PROLOMET AM 50MG TABLET'},
{medicine: 'PROLOMET AM 5MG TABLET'},
{medicine: 'AB PHYLLINE 200MG TABLET SR'} ,
{medicine: 'ACIVIR 800MG TABLET DT'},

{medicine: 'CEPODEM AZ TABLET'},
{medicine: 'ECOSPRIN AV 10MG CAPSULE'},
{medicine: 'ECOSPRIN AV 150MG CAPSULE'} ,
{medicine: 'ATORLIP 40MG TABLET'},
{medicine: 'AMTAS 5MG TABLET'},
{medicine: 'ARKAMIN 100MG TABLET'} ,
{medicine: 'AMPOXIN 500MG INJECTION'} ];

and paste it into the following array list 

 $rootScope.medicinedrop = [
    // {
    //   medicine: 'you try to drop me somewhere'
    // }

    ];

I am also utilizing $scope.maedicinedrop for drag and drop functionality from another list. However, after copying, I seem to lose that capability as I can't drop items into it from another list anymore.

Upon clicking a button 

$scope.copy = function(){
    console.log($scope.pastprescription)
    $scope.medicinedrop.unshift($scope.pastprescriptions.medicine);

     }

But even after clicking the button, it appears blank. Although data is copied in the console, it's not being displayed.

For drag and drop operations, I am implementing dragular as follows:

dragularService([containerLeft_Medicine], {
      containersModel: [$scope.allmedicines],
      copy: true,
      //move only from left to right  
      accepts: accepts
    });

    dragularService([containerRight_Medicine], {
      containersModel: [$scope.medicinedrop],
      removeOnSpill: true,
      //move only from left to right  
      accepts: accepts
    });

The ejs file for this operation looks like this:

<input class="form-control" type="text" ng-repeat="medicine_name in medicinedrop"
          value="{{medicine_name.medicine}}" />
javascriptangularjssails.js

Answer №1

Let's make a copy of the medicine list using AngularJS: $scope.medicinedrop = angular.copy($scope.medicinelist);

Answer №2

Make a duplicate of the source object or array.

angular.copy(source, [destination]);

$scope.medicinedrop = angular.copy($scope.medicinelist);

For more information, click here

Best regards.

Answer №3

To transfer the contents of the first list to the second list, you can use the following code:

 $Scope.medicinedrop = $scope.medicinelist;

Answer №4

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.medicinelist = [

{medicine: 'AMLOPRES 5MG TABLET'},
{medicine: 'ARGIPREG SACHET'},
{medicine: 'ALCIPRO 500MG TABLET'} ,
{medicine: 'PROLOMET AM 50MG TABLET'},
{medicine: 'PROLOMET AM 5MG TABLET'},
{medicine: 'AB PHYLLINE 200MG TABLET SR'} ,
{medicine: 'ACIVIR 800MG TABLET DT'},

{medicine: 'CEPODEM AZ TABLET'},
{medicine: 'ECOSPRIN AV 10MG CAPSULE'},
{medicine: 'ECOSPRIN AV 150MG CAPSULE'} ,
{medicine: 'ATORLIP 40MG TABLET'},
{medicine: 'AMTAS 5MG TABLET'},
{medicine: 'ARKAMIN 100MG TABLET'} ,
{medicine: 'AMPOXIN 500MG INJECTION'} ];

$scope.medicinedrop = [{medicine: 'TEST'}];
$scope.medicinedrop = $scope.medicinelist.concat($scope.medicinedrop);
console.log($scope.medicinedrop); 
});
Give it a shot,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
    
  </body>

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

Utilizing Objects as Properties in Phaser.Scene in Phaser 3

I've just started working with Phaser using TypeScript and I'm facing an issue. I attempted to move my main objects out of the create and preload methods by loading them as Phaser.Scene class properties. However, after making this change, my game ...

javascriptphaser-framework

Guide to downloading audio/video files from Amazon S3 using AngularJS and Codeigniter

Can anyone assist me in downloading an mp3 file from the following Amazon S3 link? I have tried numerous times to download this file without success. Any help would be greatly appreciated! Thank you in advance for your assistance! ...

phpangularjscodeigniteramazon-web-servicesamazon-s3

Transferring the value of a variable from Block to Global Scope in FIRESTORE

I'm currently working on an App in Firebase, utilizing FireStore as my primary Database. Below is a snippet of code where I define a variable order and set it to a value of 1. Afterwards, I update the value to 4 and use console.log to verify. Everyt ...

javascriptfunctiongoogle-cloud-firestorescopeglobal-scope

Is there a way to extract the unicode/hex representation of a symbol from HTML using JavaScript or jQuery?

Imagine you have an element like this... <math xmlns="http://www.w3.org/1998/Math/MathML"> <mo class="symbol">α</mo> </math> Is there a method to retrieve the Unicode/hex value of alpha α, which is &#x03B1, using JavaScrip ...

javascriptjqueryhtmlunicodehex

Align Bootstrap navigation bar items at the center horizontally

I am currently working on a navigation bar that features two icons, evenly distributed. To achieve this look, I have been experimenting with scaling the icons horizontally in order to make them center-aligned within the navigation bar. However, I have not ...

javascripthtmlcssbootstrap-4uinavigationbar

JavaScript code snippet for detecting key presses of 3 specific arrow keys on the document

For this specific action, I must press and hold the left arrow key first, followed by the right arrow key, and then the up arrow key. However, it seems that the up arrow key is not being triggered as expected. It appears that there may be some limitations ...

javascriptonkeydown

Monitor the execution of JavaScript callbacks without the need for layering functions

Currently, I am developing a function that involves multiple database calls and needs to store their results in an array before triggering a callback. Let me share some pseudocode for better understanding: function getData (array, callback) { var resu ...

javascriptnode.jscallbackclosures

Execute command problem

Explaining this code may be a bit tricky, but I'll do my best. Below is the code snippet for executing a slash command. client.on('interactionCreate', async interaction => { if (!interaction.isCommand()) return; const command = c ...

javascriptnode.jsdiscorddiscord.js

Tips for linking weight scale device to a website

I recently developed a web application that calculates the weight of products. The application was created using PHP, JavaScript, and AJAX, running on a XAMPP server. Now my client is requesting for me to integrate a weight scale machine into the applica ...

javascriptphpajax

Issue with ng-repeat causing input inside repeater to become blurry in AngularJS

I'm facing a similar issue as the one discussed here: https://groups.google.com/forum/#!msg/angular/eB19TlFHFVE/Rlh--XImXeYJ Here's the fiddle link: http://jsfiddle.net/KGu9n/25/ The problem I'm encountering is that my save function is tri ...

angularjsangularjs-ng-repeat

Utilizing AJAX to send a parameter to PHP for processing

I am facing an issue with a script that is supposed to send data to a PHP file when a user clicks on an element, but unfortunately, it's not functioning correctly. Below is the jQuery code: jQuery( document ).ready(function( $ ) { $('.rve_b ...

javascriptphpjqueryajaxwordpress

What is the best way to apply the addClass method to a list element

I've been searching for a solution to this issue for some time now, and while I believed my code was correct, it doesn't appear to be functioning as expected. HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js ...

javascriptjqueryhtmlcssaddclass

Nuxt js - Components are replicated on SSR pages

I have created a static page containing various components. When I navigate to this page from another page, everything displays correctly. However, when I directly land on the page, some components are duplicated and rendered again after the footer. Upon i ...

javascriptvue.jsnuxt.js

Issue with AngularJS filter not functioning properly

I have a specific situation where I am using an ng-repeat directive in the following manner: {"ng-repeat" => "city in cities() | filter: search"} In this context, each city object is structured like so: { attributes: {name: 'Boston'} } Furt ...

javascriptjquerysearchloopsangularjs

Ways to perform a force click on a span element when clicking on a glyphicon

There is a table cell containing two span elements: <span contentEditable=true class="editspan"></span> <span class="pencilspan glyphicon glyphicon-pencil pull-right"></span>" When clicking on span1, an input box appears for editi ...

javascriptjqueryhtml

Unraveling the intricacies of extracting data from nested object properties

Why do my variables stop being reactive after unwrapping from props? I have three components - a parent component, a second component for display, and a third component for updating data based on input (simplified code here). The third component updates ...

javascriptvue.jsvue-composition-api

Is it possible to define a Divider or Header within the options array for the dropdown component in Semantic UI React?

Currently, I'm incorporating ReactJS along with SemanticUI for ReactJS to enhance the appearance of my front end. My query pertains to whether it is feasible to define a header or divider within the options array of objects for a dropdown component? ...

javascriptreactjssemantic-ui-react

Troubleshooting jsPDF problem with multi-page content in React and HTML: Converting HTML to PDF

I need to convert HTML content in my React application into a PDF file. My current approach involves taking an HTML container and executing the following code snippet: await htmlToImage .toPng(node) .then((dataUrl) => { ...

javascripthtmlreactjspdfjspdf

Modifying attribute values within an AngularJS directive

I am working on a directive for an input element that adds leading zeros to a number when the user enters it. For example, '12' should be displayed as '0012' after the blur event. The directive takes a parameter to determine the desired ...

angularjsangularjs-directiveangularjs-ng-model

initiating a function on a separate webpage using ajax

Our website includes an IIFE script from a third party to check for a specific URL parameter and set a cookie. However, on another page, we need to set this parameter without redirecting the user, reloading the page, or altering the third-party code. The ...

javascriptjqueryhttp