Retrieving adjacent HTML elements in AngularJS without duplication

When an overlay element is clicked and the startCopying() method is triggered, the text from the copyTextTag should be copied into the pasteTextTag element.

The text should be copied in HTML format and pasted as HTML format. Additionally, there are multiple copyTextTags but only one pasteTextTag, so the text should only be copied from the copyTextTag div of the clicked overlay.

<div class="col-md-4">
    <div class="copyTextTag">
        svlgmdfgndfjkgndjkgndkjgnerjkgndkgnjdkjgndjkgnffsdf<br/>Test 1          
    </div>
    <div class="overlay" ng-click="homectrl.startCopying($event)"></div>
</div>
<div class="col-md-4">
    <div class="copyTextTag">
        svlgmdfgndfjkgndjkgndkjgnerjkgndkgnjdkjgndjkgnffsdf<br/>Test 1          
    </div>
    <div class="overlay" ng-click="homectrl.startCopying($event)"></div>
</div>

/* Area where the copied text should be pasted */
<div class="pasteTextTag"></div>

/* Angular Code */
function startCopying(evt){     
    console.log(angular.element(evt.currentTarget)) //not working       
};
javascriptangularjs

Answer №1

Integrate the copied text into an HTML template and set it as a scope variable upon clicking

<div class="col-md-4">
    <div class="copyTextTag">
        svlgmdfgndfjkgndjkgndkjgnerjkgndkgnjdkjgndjkgnffsdf<br/>Test 1          
    </div>
    <div class="overlay" ng-click="homectrl.startCopying($event)"></div>
</div>
<div class="col-md-4">
    <div class="copyTextTag">
        svlgmdfgndfjkgndjkgndkjgnerjkgndkgnjdkjgndjkgnffsdf<br/>Test 1          
    </div>
    <div class="overlay" ng-click="homectrl.startCopying($event)"></div>
</div>


/* Area where the copied text should be pasted */
<div class="pasteTextTag" ng-bind="paste"></div>

/* Angular Code */
function startCopying(evt){     
    $scope.paste = evt.target.previousElementSibling.innerHTML;     
};

https://jsfiddle.net/ru8tuv1v/

Answer №2

Feel free to give this a shot... https://jsfiddle.net/x5zfe520/2/

 <!DOCTYPE html>
    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>

    <div ng-app="myApp" ng-controller="myCtrl">

    <div class="col-md-4">
        <div class="copyTextTag">
            svlgmdfgndfjkgndjkgndkjgnerjkgndkgnjdkjgndjkgnffsdf<br/>Test 1          
        </div>
        <div class="overlay" ng-click="startCopying($event)">Copy</div>
    </div>
    <div class="col-md-4">
        <div class="copyTextTag">
           svlgmdfgndfjkgndjkgndkjgnerjkgndkgnjdkjgndjkgnffsdf<br/>Test 2          
        </div>
        <div class="overlay" ng-click="startCopying($event)">Copy</div>
    </div>

    /* Area for the pasted copied text */
    <div class="pasteTextTag"></div>
    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {       
        $scope.startCopying = function(evt){
         var copiedHtml = angular.element(angular.element(evt.currentTarget).parent('.col-md-4').children()[0]).html();
         console.log(copiedHtml) ;
         angular.element(document.getElementsByClassName("pasteTextTag")).html(copiedHtml);
        }
    });
    </script>

    </body>
    </html>

Answer №3

I successfully created a fiddle that is functioning as intended.

https://jsfiddle.net/u1cxe5st/

In the following div, there is no text provided. It seems like you were not clicking on the correct spot to trigger the click event.

<div class="overlay" ng-click="homectrl.startCopying($event)">Click Me</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

Adjust the placement of the fixed header waypoint or change its offset

Currently working on developing a Wordpress site with the Avada theme, my goal is to have a sticky header that starts immediately at the top of the page. This is the website in progress: The site I'm trying to emulate is synergymaids.com. If you vi ...

javascriptjquerycss

Discovering which chip has wrapped to the next line in Material UI Autocomplete can be found by closely inspect

Currently, I am working with a Material UI autocomplete feature that functions as follows: https://i.sstatic.net/4LrwI.png My goal is to determine when the fourth chip wraps to the next line within the autocomplete so that I can proceed with additional c ...

javascriptreactjsreact-reduxreact-hooksmaterial-ui

Guide to sending a post request with parameters in nuxt.js

I am trying to fetch data using the fetch method in Nuxt/Axios to send a post request and retrieve specific category information: async fetch() { const res = await this.$axios.post( `https://example.com/art-admin/public/api/get_single_cat_data_an ...

javascriptvue.jsaxiosnuxt.js

Which is the better option: assigning a separate function to each object or binding one function to all objects simultaneously?

I have a loop that dynamically appends links to the element with id #content. I have implemented 2 different ways to achieve this. (1) $.each(array, function(key, value) { $('#content').append('<a href="#">text</a>'); ...

javascriptjqueryhtmlperformanceappend

Managing a plethora of JavaScript scripts in Aptana Studio

Recently, I wrote a few lines of Javascript code using Aptana Studio 3 for a web project and decided to outsource some of it. Here is the original code structure: (function(window) { var App = { // properties and functions... }; App.SubObject1 = { // ...

javascriptaptanacode-assist

What is the best way to retrieve the ID of a post request using React's axios hook?

My goal is to make a post request to create an app, and then establish its links. To achieve this, I need to obtain the id of the newly created items in order to create the links. Is there a way to retrieve the id of the item created through the post reque ...

javascriptreactjsaxiosreact-hooks

What is the best way to include a property with a name in quotes to an object after it has already been declared?

Is there a way to include a property with a quoted name to an object after its declaration? Here's a simplified scenario: var Obj = {} Instead of: Obj.dog = "Woof!"; I want to achieve: Obj."dog" = "Woof!"; Similar to: var Obj = { "dog" : " ...

javascriptnode.js

Automatically reduce the size of Java Script files and CSS files with compression

I'm currently working with Google App Engine and JQuery. I'm looking for a solution that can automatically compress my JavaScript and CSS files when deploying them to the GAE server. It's quite cumbersome to manually compress all the files e ...

javascriptjquerygoogle-app-engine

Implement a smooth transition effect when changing the image source

I am currently working on enhancing a Squarespace website by adding a new image fade-in/fade-out effect when the mouse hovers over one of three buttons. The challenge I'm facing is that the main static image is embedded as an img element in the HTML r ...

javascripthtmlcss

Having trouble loading the image source using JSON in Vue.js

var topArticle=new Vue({ el:'#toparticle', data:{topmostArticle:null}, created: function(){ fetch('topnews.json') .then(r=>r.json()) .then(res=>{this.topmostArticle=$.grep(res,functi ...

javascripthtmljsonvue.js

What is the process for converting NDC coordinates to camera space within a vertex shader?

I am currently maintaining a vertex shader contained within a custom material class (originally inherited from ShaderMaterial but now from MeshStandardMaterial) which converts 3D coordinates to Normalized Device Coordinates (NDC) as usual: vec4 ndcPos = pr ...

javascriptthree.jsglslwebgl

When you attempt to "add website to homescreen" on an iPhone, Ajax malfunctions

I have a unique website feature that utilizes ajax to dynamically load content when the user interacts with certain buttons. Everything functions smoothly up until a user tries to access the website through the "add to homescreen" option on mobile Safari a ...

javascriptjqueryiphoneweb-applicationsmobile-safari

Issue: Unable to locate module - Error in integration of Vue.js with Laravel framework

I'm currently following a tutorial on YouTube for setting up Vue and Laravel. My resources folder structure looks like this so far: - resources - js - app.js - vue -app.vue In my app.js file: require('./bootstrap&ap ...

javascriptlaravelvue.js

No data found on Angular TypeScript page with an empty array

Incorporated a function called 'getQuestionsWithInterviewId' to populate my 'Questions' string, but it appears empty when I attempt to call it within the ngOnInit and ngAfterContentInit methods and log the result in the console. import ...

javascriptarraysangulartypescriptngoninit

Tips for manipulating a shape and adjusting the vertices later in three.js

Greetings and thank you in advance for your assistance! I have been facing challenges when creating shapes with the mouse using THREE.Shape. While I am able to draw and edit shapes that are centered on the canvas without any issues, I encounter problems wh ...

javascriptthree.js

Encountered an issue while importing React with webpack: Unable to resolve module 'react'

I keep encountering an issue Error: Cannot resolve module 'react' (and react-dom) while using webpack. This project setup seems to be the most challenging one I've faced, and I'm struggling to figure out why it's not functioning pr ...

javascriptreactjswebpack

Choose a possibility that exceeds mere presentation

When using the select tag to display a dropdown, I am using ng-repeat in the option tag. If the ng-repeat contains a long string with a maxlength of 255 characters, how can I break it into lines to prevent overflow on the screen? Check out this screenshot ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat

Unable to send multiple cookies using custom headers in Next.js configuration

I am using custom headers to set the cookie in my next.config.js file. The refresh token is successfully set, but for some reason the second token is not being recognized. key: 'Set-Cookie', value: `RefreshTokenKey = " ...

javascriptcookiesnext.jshttp-headers

Automatically submitting Ajax form upon loading the page

I am attempting to use ajax to automatically submit a form to a database upon page load. The form and php code work perfectly when manually submitted, but for some reason, the ajax function does not trigger. Despite checking the console for errors and con ...

javascriptphpjqueryajaxforms

Sending data in JSON format from an AngularJS frontend to a Spring REST API and effectively managing it

Currently, I am deepening my knowledge in AngularJS and Spring MVC. I find myself in a predicament where I have an AngularJS controller that makes a REST API call to a Spring service. My main query revolves around the process of accepting JSON values withi ...

angularjsjsonspringspring-mvc