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

Question

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.

javascript angularjs

Answer 1

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>

Answer 2

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>

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

Answer №1

Similar questions

How can components be utilized with v-edit-dialog?

Two liquid level divs within a container with a set height

Experience a seamless transition as the background gently fades in and out alongside the captivating text carousel

Ensuring the authenticity of a Node.js model through the utilization of

The second occurrence of a jQuery event

Transitioning classes in Vue elements

Troubleshoot my code for clustering markers on a Google map

Creating a paragraph from text inputs using React

Issue with combining md-grid-tile and md-button in Angular Material not functioning as expected

Step by step guide on enabling link routing on a Material UI list item, excluding only one specific button within the list item

Using the @ symbol in jQuery within an MVC framework can be achieved by first ensuring that

Angular is encountering a circular dependency while trying to access a property called 'lineno' that does not actually exist within the module exports

The final version of the React App is devoid of any content, displaying only a blank page

Locate the specific version of a JavaScript library within compiled JS files

the div background is limited to the exact size of the text, not filling the entire

Can you explain the concept of a "cURL" and guide me on how to use it effectively?

Tips for updating the DOM within a map function by utilizing the onChange event with a checkbox and react hooks

Directing a controller assignment in AngularJS 1.2 via a directive

Transmit the bound data (using ng-model) to a custom AngularJS directive

What causes TypeScript's ReadonlyArrays to become mutable once they are transpiled to JavaScript?