Extracting the chosen content from a textarea using AngularJS

Greetings! I am currently experimenting with an example that involves displaying values in a text area. You can find the code on Plunker by following this link: Plunker Link

<!DOCTYPE html>
<html>

<head>
     <script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" 
type="text/javascript"></script>
     <script src="script.js"></script>
</head>

   <body ng-app="testApp" ng-controller="testController">
   <textarea ng-model="stringArray" ng-list="&#10;" ng-trim="false" 
   rows="10"> 
   </textarea>

  <div>
     {{stringArray}}
  </div>
 </body>

 </html>

// Code snippet above

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

 testApp.controller('testController', function ($scope)
 {
      $scope.stringArray =
      [
       "First String",
       "Second String",
       "Third String"
      ];
   });

I am curious to learn how to retrieve the selected value from the text area. For instance, if 'First String' is selected, I want only that value to appear in the output.

Answer №1

To fetch the selected text, you can utilize window.getSelection().toString(). Remember to assign this value to a separate $scope variable in AngularJS as using stringArray directly will overwrite the existing content.

The code snippet below demonstrates the usage of the ng-mouseup event:

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

testApp.controller('testController', function($scope) {
  $scope.stringArray = [
    "First String",
    "Second String",
    "Third String"
  ];


  $scope.getSelectedText = function() {
    $scope.selectedTextDisplay = window.getSelection().toString();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testApp" ng-controller="testController">
  <textarea ng-mouseup='getSelectedText()' ng-model="stringArray" ng-list="&#10;" ng-trim="false" rows="10"></textarea>

  <div>
    {{selectedTextDisplay}}
  </div>
</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

The parameters for a GET request in AngularJS $resource are displayed in the URL

My backend built on NodeJS/express/mongojs is returning a 404 (not found) error when parameters are included in the URL. The backend REST interface code looks like this: var express = require('express'); var router = express.Router(); router.get ...

Discovering all jQuery functions employed in a JavaScript file can be accomplished through the utilization of regular expressions

I have a somewhat unconventional idea that I want to share. The project I'm currently working on has an old front-end codebase that is causing the website to run slowly, with jQuery being a major factor. My plan is to develop a tool that can analyze a ...

Tips for incorporating validation/restrictions into react-datepicker

I've been working on implementing restriction and validation in a react-datepicker component. I'm utilizing redux-form for validation and normalization purposes. Issue: I've noticed that neither the normalizing function nor the validation f ...

Using Material-UI's <Autocomplete/> component and the getOptionLabel prop to handle an empty string value

Currently, I am working with material-ui autocomplete and passing an array of states to its options property. However, I have encountered an issue with the getOptionLabel method: Material-UI: The `getOptionLabel` method of Autocomplete returned undefined ...

Is this conditional statement accurate?

Could this be a legitimate condition? Why isn't it functioning as expected in PHP? var myString = 'hello'; if(myString == ('hello' || 'hi' || 'bonjour' || 'hallo')){ alert('Welcome'); } ...

Tips for displaying a nested JSON array in a table format?

I'm working with a JSON array and need to display the data in a table. My question is, how can I insert 'transactionData' inside the main object? Essentially, I want the object structure to be: { completeTime: "value", createTime: ...

What is the precise output of getFloatTimeDomainData function?

I'm puzzled about the return values of getFloatTimeDomainData. The range of possible values and their significance are unclear to me. According to the specs: This method copies the current down-mixed time-domain (waveform) data into a floating-poin ...

Issue with dynamic form JavaScript functionality after removing curly braces { } from a select tag in Rails

In my Rails form, there is a gender field defined as follows: <%= f.select :gender, ["Male","Female"],{class: "gender"} %> I also tried adding an onclick event like this: <%= f.select :gender, ["Male","Female"],{class: "gender"},onclick: "categ ...

Multiple file formats supported by Uploadify

I am trying to find a solution for having various file types in the jQuery plugin Uploadify. Consider this scenario: You want to open a file with a program of your choice. Starting with a default OS dialog, you can select different file types from a dropd ...

Tips for acquiring the initial fully visible item within a scrollable element with horizontal alignment through jQuery

I'm trying to use jQuery to find the first visible element inside a scrollable DIV, but I can't quite get it to work correctly. Can someone please help me identify what's causing the issue? $('div').on('scroll', functio ...

Declaring a function within a conditional statement

I recently came across a code sample in the book You Don't Know JS: Scope & Closures that is puzzling to me. "Function declarations that appear inside of normal blocks typically hoist to the enclosing scope, rather than being conditional as this ...

Discover the syntax for reading route parameters in Angular

Currently, I am integrating the Paypal API into my project. After confirming a purchase, Paypal redirects to a specified URL. I set the desired URL as "localhost:4200/shop/order". However, when Paypal returns the URL, it appends the token and payerid at th ...

Guide on generating a fresh array of objects that encompass distinct items, alongside their combined prices and quantities using JavaScript

I am struggling to generate a new array of objects from one that contains duplicates. For instance, here is the console.log output of the current array: console.log(items); [{ _id: 5eb2f7efb5b8fa62bcd7db94, workName: 'best item ever', ...

Passing an object in Vue.js during a redirect

i currently have two components named projectListComponent and projectSingleComponent. I want to pass an object from component 1 to component 2 during redirection. Here is my code: projectListComponent.vue <template> <div class="row justify ...

Tips for utilizing regex to locate words and spaces within a text?

I'm feeling so frustrated and lost right now. Any help you can offer would be greatly appreciated. I am currently dealing with an issue in Katex and Guppy keyboard. My goal is to create a regex that will identify the word matrix, locate the slash that ...

What is the best way to show inline icons within menu items?

Issue Upon selecting an option from the menu, I encounter a problem where the icon (represented by a question mark inside a speech bubble) appears on a different line than the text ("Question"). Fig. 1. Display of menu after selection with the icon and t ...

Unexpected value assigned to private variable within a PHP class

Initially, the issue I am encountering originates from my PHP class that is called by a PHP file accessed through an AJAX call. The main problem lies in the fact that the return value does not align with the sybase_result value. What could possibly be mis ...

What is causing the data element to remain unchanged within a Vue.js function and what steps can be taken to ensure its value can be updated?

Using the axios API in the created() function, I am able to access webURLs. When a mouseover event triggers a v-for handler in the HTML file, the index is obtained and assigned to the selectedState data element. Although the value of selectedState changes ...

Learn the steps to extract information from a specific ID on a webpage using Firebase

I am facing an issue with retrieving information from my Firebase database in Angular. As a beginner in both Angular and Firebase, I'm not sure how to achieve this. Below are the relevant code snippets: Address list HTML <ion-card *ngFor="let ite ...

Issue encountered: Unable to locate 'moduleName' within the React JS module

As I was delving into the intricacies of React JS through the official documentation, everything seemed to be progressing smoothly. However, when attempting to export a method from one page to another as shown below (with file names provided at the beginni ...