How do I convert a string of numbers into a list format for displaying on an HTML table with AngularJS?

Question

How do I convert a string of numbers into a list format for displaying on an HTML table with AngularJS?

I am populating an HTML table dynamically using input from textboxes. I want to achieve the following:

Given

$scope.submittedNumbers = 00251212 00254545 00257878 00256565

Display as

00251212

00254545

00257878

00256565

Below is my AngularJS function for adding a row to the HTML table. How can I make this work?

$scope.addCertificate = function () {

    var certificate = {
        emailAddress: $scope.emailAddress,
        certificateType: $scope.certificateType,
        searchType: $scope.searchType,
        submittedNumbers: $scope.submittedNumbers,
    };

    $scope.requests.push(certificate);
};

javascript asp.net angularjs

Answer 1

Answer №1

To break it down into an array in the controller, simply use the following code:

$scope.splitNumbers = $scope.inputNumbers.split(' ');

Then, loop through it using ng-repeat:

<ul>
    <li ng-repeat="num in splitNumbers">{{ num }}</li>
</ul>

Finally, you can rejoin the numbers with:

var joinedNumbers = $scope.splitNumbers.join(' ');

Answer 2

To break it down into an array in the controller, simply use the following code:

$scope.splitNumbers = $scope.inputNumbers.split(' ');

Then, loop through it using ng-repeat:

<ul>
    <li ng-repeat="num in splitNumbers">{{ num }}</li>
</ul>

Finally, you can rejoin the numbers with:

var joinedNumbers = $scope.splitNumbers.join(' ');

How do I convert a string of numbers into a list format for displaying on an HTML table with AngularJS?

Answer №1

Similar questions

How to Identify and Print a Specific Property in a JSON Object using Node.js?

Label Overlapping Issue in React Select

Close the Hopscotch modal when moving to the next step or reaching the end

Is it possible to modify the URL parameter of a website?

Is there a way to utilize ajax to submit a form and upload a file to a spring controller?

What is preventing me from utilizing a property value of the parent entity in the Where method within Include?

The UI-Router system allows for states with varying and distinct views

The scale line on the OpenLayers map displays the same metrics twice, even when the zoom level is different

What is the best method for displaying over 1000 2D text labels using three.js?

AngularJS ng-model not refreshing its data

Algorithm for combining animation with a click event in JS/jQuery

Exploring the power of indexedDB within a PhoneGap app

Implementing optimal techniques to create a JavaScript file for data retrieval in a Node.js application

Ensuring that a $(function() is consistently executed and does not diminish over time

Obtaining input value when button is clicked

Loading the central portion exclusively upon clicking a tag

Preventing the cascading effects of past hovers with AngularJS

When executing npm run dev, an UnhandledPromiseRejectionWarning is triggered

AngularJS does not refresh the DOM as anticipated

Calculating tables dynamically with jQuery