How to display variables values in a row with comma separator in angularjs

Question

I have four variables and I want to display their values in a row with comma separator. I have something like this:

{{first}}<span ng-show="first != '' && (second != '' || third != '' || forth != '')">, </span>
{{second}}<span ng-show="second != '' && (third != '' || forth != '')">, </span>
{{third}}<span ng-show="third!= '' && forth != ''">, </span>
{{forth}}

It works (see jsfiddle) but looks awful. Do you have any idea how to achieve this (without adding next variable) in more smart, elegance or useful way?

Seth Flowers · Accepted Answer · 2016-06-15 13:15:25Z

8

Look at the array.join function. You can add a function to your scope to do the join, and filter out empty values. For instance:

$scope.joined = function() {
  return [$scope.first, $scope.second, $scope.third, $scope.forth]
    .filter(function(i) { return i; })
    .join(', ');
};

Then in your markup:

{{joined()}}

See this fork of your fiddle.

See the MDN docs for Array.prototype.join() and Array.prototype.filter().

edited Jun 15, 2016 at 13:15

answered Jun 15, 2016 at 13:02

Seth Flowers

9,2302 gold badges34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gyc Over a year ago

delete the first input and there's a floating coma at the begining

Seth Flowers Over a year ago

@gyc - Yes, I realized this right after I posted it. I've updated the code, and the link to a new fiddle.

Collectives™ on Stack Overflow

How to display variables values in a row with comma separator in angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related