How to print comma seperated values using array inside div with ngrepeat?

Question

I am trying to print comma seperated values with successive loops but getting double comma.

Update:

Suppose i have data like this in my array:

 var carModel = [model:"1",model:"2"]; 
var carNames = [Name:"Abc",Name:"Xyz"]; 
var Price = 1000;

Expected output:

  1 as Car1,2 as Car2,Abc as Name1,Xyz as Name2,1000 as price

Code:

 <div ng-repeat="data in carModel">
     {{data.model}}
     <div>as</div>
     Car{{ $index + 1 }} 
     <span ng-if="!$last">,</span>
 </div>

<div ng-repeat="data in carNames">
     {{data.Name}}
     <div>as</div>
     Car{{ $index + 1 }} 
     <span ng-if="!$last">,</span>
 </div>

 <span ng-if="carModel.length > 0 || carNames.length > 0" > , </span>
 <div>
  {{ Price }}
  <div>as</div> price
</div>

Now this gives me below output which contains double comma:

1 as Car1,2 as Car2,Abc as Name1,,Xyz as Name2,1000 as price

@ryanyuyu Stated in the top:1 as Car1,

I Love Stackoverflow
– I Love Stackoverflow

2016-09-21 15:17:44 +00:00
Commented Sep 21, 2016 at 15:17 — I Love Stackoverflow
– I Love Stackoverflow, Commented Sep 21, 2016 at 15:17

nubinub · Accepted Answer · 2016-09-21 15:30:20Z

4

<div ng-repeat="data in cars">
     {{data.model}}
     <div>as</div>
     Car{{ $index + 1 }} 
     <span ng-if="!$last">,</span>
 </div>

$last can be used to know if the current element is the last of your collection.

edited Sep 21, 2016 at 15:30

answered Sep 21, 2016 at 15:16

nubinub

1,9382 gold badges15 silver badges24 bronze badges

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

2 Comments

I Love Stackoverflow Over a year ago

Ok this worked correctly but i am getting problem when i have 2 successive loops.See my updated question

nubinub Over a year ago

Guess you have to work a little bit on your logic here to find the suitable conditions.

ryanyuyu · Accepted Answer · 2016-09-21 16:02:11Z

2

Other possible non-Angular solutions:

If this is merely a long string, and you're not doing anything else with the car data, just assemble the string in javascript with String.join().

Employ a css-based solution. For example, using the :last-of-type pseudo selector. For example:

<div ng-repeat="data in cars" class="car">{{data.model}}
                           <div>as</div>
                           Car{{ $index + 1 }}
</div>

Css:

.car::after {
  content: ',';
}
.car:last-of-type::after {
  content: '';
}

Demo on plunker

answered Sep 21, 2016 at 16:02

ryanyuyu

6,50611 gold badges52 silver badges56 bronze badges

1 Comment

I Love Stackoverflow Over a year ago

Thank you so much for the solution and this worked but only problem is that this car:last-of-type::after property is not working with span tag.only working with div

Collectives™ on Stack Overflow

How to print comma seperated values using array inside div with ngrepeat?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related