Use AngularJS to take tab delimited text copied and pasted into a textarea, and then convert it into a table

One of the features in my app requires users to copy and paste tab delimited text. I need to convert this text into a table where each new column is represented by a tab and each new row is indicated by a new line.

I've managed to create a list for each new line in the pasted text, but now I'm wondering how I can extract an array from tab delimited text.

 <div ng-app>

   <textarea ng-model="items" ng-list="/\n/"></textarea>
   <table>
     <tbody>
       <tr ng-repeat="item in items">
         <td>
           {{item}}
         </td>
       </tr>
     </tbody>
   </table>

</div>

Unfortunately, I can't demonstrate pasting tab delimited text here without it being reformatted. To preserve the format, you can copy and paste from Notepad or a spreadsheet.

Answer №1

Is this solution effective for your needs? http://jsbin.com/bosamuhoti/1/edit

Check out this code snippet:

Angular application

angular.module('myapp', [])
.controller('myCtrl', ['$scope', function($scope){
    $scope.items = [];
    $scope.table  = []; 

  $scope.$watch("items", (newValue, oldValue) => {

    for (var item of newValue) {
        $scope.table.push(item.split('\t'));
      }

  });
}]);

Here is the corresponding HTML:

<textarea ng-model="items" ng-list="&#10;" ng-trim="false"></textarea>

   <table border="1">
     <tbody>

       <tr ng-repeat="item in table track by $index">
         <td ng-repeat="data in item track by $index">
           {{data}}
         </td>
       </tr>
     </tbody>
   </table>

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

Vue: nesting components within components

Looking for a clever solution to create a nested component system with efficient rendering? Check out the code snippet below: custom-tab.vue (child component) <template> <slot></slot> </template> <script> export def ...

Using Javascript to choose an option from a dropdown menu

const salesRepSelect = document.querySelector('select[name^="salesrep"]'); for (let option of salesRepSelect.options) { if (option.value === 'Bruce Jones') { option.selected = true; break; } } Can someone please ...

Fetching data from Page 1 and passing it to Page 2 using Javascript

I'm currently experiencing an issue with my AJAX function where it needs to transfer a value from page 1 to page 2 for storage. Let's start with the AJAX function on page one: top.location.href = 'http://www.something.com/redirect.php?emai ...

What is the proper way to end a WebSocket connection?

Can a websocket connection be terminated by the server without closing the entire server? If so, how can this be done? Note: My back-end is implemented using NodeJS and I am using the 'ws' websocket module. ...

Can anyone offer any suggestions for this issue with Angular? I've tried following a Mosh tutorial but it's

Just finished watching a video at around 1 hour and 35 minutes mark where they added the courses part. However, I encountered an error during compilation. ../src/app/app.component.html:2:1 - error NG8001: 'courses' is not recognized as an elemen ...

Analyzing cookie data and utilizing jQuery for data presentation

Let's brainstorm. I'm currently working on a chat bar and have successfully implemented its functionality. However, I am facing a challenge in maintaining the continuity of the chat boxes while navigating through different pages on the website. ...

What is the best way to validate if fields are blank before sending a message using the button?

<template> <div> <div class="form-group"> <label for="name">First Name</label> <input type="text" class="form-control" v-model="firstName" placeholder="Ente ...

Changing tabs within a modal in Angular

My login and signup forms are displayed in a modal with two tabs at the top for switching between them, as shown in the picture. Although switching between tabs is working fine, I want users to be able to choose between login and signup directly on the ma ...

Can an action be activated when the mouse comes to a halt?

Currently, I am having trouble triggering an event when a user stops moving their mouse over a div element. The current event is set up to show and follow another element along with the mouse movement, but I want it to only display when the mouse stops mov ...

Sign in with Google / External authentication service

Currently working on an AngularJS application that includes Google login functionality. To implement this feature, I found a useful guide at the following link: . Additionally, there is a script that is called when the page loads: <script type="text/j ...

Looking for advice on utilizing Node.js and MongoDB to identify platform modifications on a website

I need guidance for a project I'm currently working on. The project involves extracting headers, like the example below in Mongo document format: { "url": "google.com", "statusCode": 301, "headers": { "location": "http://www.goog ...

When iPhone images are uploaded, they may appear sideways due to the embedded exif data

When trying to upload images from a mobile device like an iPhone, it's common for the images to appear sideways unless viewed directly in Chrome. It seems that this issue is related to the image exif orientation data, which Chrome can ignore but othe ...

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Having created an HTML page with a form, my goal is to capture user input and store it in a JSON file. However, I've run into some confusion... In the process, I utilized the express module to set up a server. My mind is juggling concepts such as AJA ...

Tips for enhancing the width of the extrude shape in the x and z axes using Three.js

After creating a shape using extrude geometry, I found that I needed to increase the thickness along the x and z axes. Although I used bevelThickness to increase the thickness along the y axis, I still need to adjust it further. For reference, please see ...

Turn off the background when the automatic popup box appears

I have implemented a popup box that automatically appears after 5 seconds when the site is loaded. However, if I click outside of the popup box, it closes. I want to disable the background when the popup box is displayed. If I remove the two lines of code ...

I'm encountering errors from JQuery right from the start of the code

Hey there, I encountered a problem with my script: $(document).ready(function(){ alert("works"); }) I tried using a regular document.ready check but it keeps throwing 7 errors at me. Check out the screenshot of the errors here Any help or advice wo ...

Guide to combining an object with an array object in Vue.js

After receiving an API response's data, [{id: 1, name:"Test 1"},{id: 2, name:"Test 2"}] I am working on my component .vue file. ... created() { const request = axios.get("***api_url***").then(response => { ...

Ensure to first close the existing global connection before attempting to establish a new one in your Node.js Post WebApi application

Currently, I am in the process of creating a small post WebAPI using node.js to collect user data such as names and numbers. However, when I have an excessive number of users accessing this web API, I encounter the following error message: "node.js Global ...

Switch up the font style of the title element

Is it possible to modify the font-family of the title attribute in an input field using either JavaScript or jQuery? <input type="text" title="Enter Your Name" id="txtName" /> ...

How can I retrieve a data field with a colon in its key using Cytoscape.js?

After diligently going through the official documentation and following the steps in the tutorial, I have successfully managed to access a node's data field and use it for labeling, as long as the key is a simple string. However, my data will contain ...