AngularJS Comma separated for JSON format

Question

I have an issue with the comma separated with ng-repeat and ng-if.

I want to make the result as comma separated, but the last item is also include the comma.

My Expectation is : AAA, CCC, EEE

But the output is coming as : AAA, CCC, EEE,

The ng-repeat block is as below:

<div ng-repeat="provider in providersInfo">
    <span ng-repeat="policy in policiesInfo | filter:{ProviderId : provider.ProviderId }:true">
        <span ng-if="policy.HasChecked">{{ policy.PolicyName }}{{$last ? '' : ', '}}</span>
    </span>

    <!-- or -->

    <span ng-repeat="policy in policiesInfo | filter:{ProviderId : provider.ProviderId }:true">
        <span ng-if="policy.HasChecked">{{$index == 0 ? '' : ', '}}{{ policy.PolicyName }}</span>
    </span>
</div>

Here, policiesInfo is join with lookup table, the output of JSON format is:

For each ProviderId it will contain 6 lookup records:

policiesInfo = [ 
    {PolicyId : 1, PolicyName: 'AAA', ProviderId: 25, HasChecked: true },
    {PolicyId : 2, PolicyName: 'BBB', ProviderId: 25, HasChecked: false },
    {PolicyId : 3, PolicyName: 'CCC', ProviderId: 25, HasChecked: true },
    {PolicyId : 4, PolicyName: 'DDD', ProviderId: 25, HasChecked: false },
    {PolicyId : 5, PolicyName: 'EEE', ProviderId: 25, HasChecked: true },
    {PolicyId : 6, PolicyName: 'FFF', ProviderId: 25, HasChecked: false }
]

Here $last is consider as PolicyId : 6 and $index is consider as PolicyId : 1

New Dev · Accepted Answer · 2014-12-19 07:20:54Z

4

Your actual $last (FFF) is not rendered because it has HasChecked: false, so the last comma "," you're seeing is the one rendered for EEE.

To achieve what you want you'd need to filter out the HasChecked: false first, so that $last would apply to the filtered array:

<span ng-repeat="policy in policiesInfo | filter: {HasChecked: true, ProviderId: provider.ProviderId}">
   {{policy.PolicyName}}<span ng-if="!$last">,</span>
</span>

plunker

edited Dec 19, 2014 at 7:20

answered Dec 19, 2014 at 6:29

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

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

2 Comments

Arulkumar Over a year ago

I solved the issue by adding 1 more filter, but your answer helped me too think about the filter by HasChecked

Arulkumar Over a year ago

Your suggestion <span ng-repeat="policy in policiesInfo | filter: {HasChecked: true, ProviderId: provider.ProviderId}"> is working.

Arulkumar · Accepted Answer · 2014-12-19 07:18:27Z

1

I achieved the result by adding one more filter:

<span ng-repeat="policy in policiesInfo | filter:{ProviderId : provider.ProviderId }:true | filter: checkedPolicies">
    <span>{{ insurancepolicy.PolicyTypeName }}{{$last ? '' : ', '}}</span>
</span>

$scope.checkedPolicies = function(policyItem) {
    return policyItem.HasChecked;
};

answered Dec 19, 2014 at 7:18

Arulkumar

13.3k14 gold badges51 silver badges76 bronze badges

1 Comment

New Dev Over a year ago

I forgot about your other filter - added it to the answer

Collectives™ on Stack Overflow

AngularJS Comma separated for JSON format

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