Showing elements of an array with personalized spacing in angularjs

Question

Showing elements of an array with personalized spacing in angularjs

Looking to show a string[], here's the setup:

JS Code

var result = ["Fish","Mutton","Shrimp","Chicken"];
$scope.res = result;

All array values are retrieved in $scope.res and displayed in HTML using ng-bind,

HTML code

<span ng-bind="res"></span>

Result: Fish,Mutton,Shrimp,Chicken

Desired Result: Fish, Mutton, Shrimp, Chicken

Adding spaces between each value is needed.

javascript angularjs arrays function

Answer 1

Answer №1

To achieve this, you can utilize the join method.

Utilizing the join() method allows you to combine all elements of an array (or a similar object) into a single string.

JavaScript

var finalResult = ["Apple","Banana","Orange","Grapes"];
$scope.output = finalResult.join(', ');

HTML

<span ng-bind="output"></span>

var myApp = angular.module('myApp', []);
myApp.controller('CtrlOne', function ($scope) {
    var finalResult = ["Apple","Banana","Orange","Grapes"];
    $scope.output = finalResult.join(', ');
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <fieldset ng-controller="CtrlOne">
        <span ng-bind="output"></span>
    </fieldset>
</div>

Answer 2

To achieve this, you can utilize the join method.

Utilizing the join() method allows you to combine all elements of an array (or a similar object) into a single string.

JavaScript

var finalResult = ["Apple","Banana","Orange","Grapes"];
$scope.output = finalResult.join(', ');

HTML

<span ng-bind="output"></span>

var myApp = angular.module('myApp', []);
myApp.controller('CtrlOne', function ($scope) {
    var finalResult = ["Apple","Banana","Orange","Grapes"];
    $scope.output = finalResult.join(', ');
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <fieldset ng-controller="CtrlOne">
        <span ng-bind="output"></span>
    </fieldset>
</div>

Showing elements of an array with personalized spacing in angularjs

Answer №1

Similar questions

Expression fragment in Thymeleaf

python Efficiently load zipfile data into a numpy array

Is there a way to determine completion of page loading in an AngularJS application using JavaScript?

Implement a code to apply to an image that is loaded dynamically

The navigation bar in javascript automatically removes the active class once the page has finished loading

Nuxt.js is throwing a TypeError because it is unable to access the 'minify' property since it is undefined

Issue in d3.js: bisector consistently returning zero

Implement seamless content loading using jQuery, eliminating the need

How can you determine the number of distinct arrays within an array using PHP?

Automating the process of running npm start on page load: A guide

Accessing attributes declared in the constructor from within class methods is not possible

Exploring Angular's ng-transclude directive within a repeat loop

Ways to designate a parent element in Vue Draggable when the element is lacking a child

During multiple-array references, what action is the dereference operator instructing the compiler to take?

What is the method to execute the onclick command once a selection has been made from the drop-down menu?

Tips for transferring the data from one yform value to another field

"Troubleshooting the lack of functionality in nested ajax calls, click events, or event

Display sub navigation when clicked in WordPress

"Exploring the benefits of using nested mapping for res.json() in an Express application

Pre-submission validation in JavaScript for AJAX requests