HTML - split the array values dynamically using comma seperated

Question

Using ng-repeat am showing array of values which am getting it from backend. But i want to split the specific values using comma seperated and displya it dynamically.

Please find the HTML code below.

<li ng-repeat="history in claimGroupingHistories">
 <div class="row">
            <div class="col-lg-4 col-md col-sm-4 col-xs-4">
              <label>{{'claimgroup.history.oldvalueselected'|translate}}:</label>
            </div>
            <div id="historyOldValueSelected_{{$index}}" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{history.oldValueSelected}}</div>
            </div>
 </div>
</li>

Here, in the {{history.oldValueSelected}} values will be like ABC1234, XYZ2345, IJK098. Instead of showing the value in single line. I want to split the value using comma seperated and display the value.

For Example :

Now, it showing like,

Old Value Selected : ABC1234, XYZ2345, IJK098

Expecting output like,

Old Value Selected : ABC1234
                     XYZ2345
                     IJK098

Splitting the array values dynamically using comma seperated.

Testdata :

[  
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":null,
  "newValueSelected":"Group by minimum claims, Customer Invoice or Repair Date",
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-22T18:42:59.000Z"
},
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":"Group by minimum claims, Customer Invoice or Repair Date",
  "newValueSelected":"Group by minimum claims",
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-23T06:13:07.000Z"
},
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":"Group by minimum claims",
  "newValueSelected":"Group by minimum claims, Customer Invoice No",
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-23T06:14:54.000Z"
},
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":"Group by minimum claims, Customer Invoice No",
  "newValueSelected":null,
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-24T06:23:33.000Z"
},
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":null,
  "newValueSelected":"Customer Invoice No, Group by minimum claims",
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-24T06:23:58.000Z"
}
]

Guest · Accepted Answer · 2019-01-24 10:32:52Z

1

I am assuming history.oldValueSelected is a string, because if oldValueSelected was an array you could use ng-repeat like this:

<div layout="column">
    <span ng-repeat="oldValue in history.oldValueSelected" ng-bind="oldValue"></span>
</div>

Now to oldValueSelected being a string. I can think of two options: You can either

split the values in the controller after you got your data
split it in ng-repeat

If you choose the second option, you can do the following:

<div layout="column">
    <span ng-repeat="oldValue in history.oldValueSelected.split(', ')" ng-bind="oldValue"></span>
</div>

EDIT: I didn't get the expected output when I used class="row"

<li ng-repeat="history in $ctrl.histories">
    <!-- class="row" didn't deliver the expected output-->
    <div layout="row">
        <div class="col-lg-4 col-md col-sm-4 col-xs-4">
            <!--  For testing purposes - replace with your code-->
            <label>{{history.name}}:</label>
        </div>
        <div layout="column">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" ng-repeat="oldValue in history.oldValueSelected.split(', ')">{{oldValue}}</div>
        </div>
    </div>
</li>

In the controller for testing purposes:

this.histories = [
    {name: "number 1", oldValueSelected:"ABC1234, XYZ2345, IJK098"},
    {name: "number 2", oldValueSelected:"ABC1234, IJK098"},
    {name: "number 3", oldValueSelected:"IJK098"}
];

edited Jan 24, 2019 at 10:32

answered Jan 24, 2019 at 9:47

Guest

881 silver badge5 bronze badges

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

8 Comments

Karthikeyan Over a year ago

I have modified in this way., but still its not working as expected

<div ng-repeat="oldValue in history.oldValueSelected.split(', ')" ng-bind="oldValue" class="col-lg-8 col-md-8 col-sm-8 col-xs-8span">{{history.oldValueSelected}}</div>

. Where am going wrong here?

Karthikeyan Over a year ago

Have tried with this code also

<div layout="column" class="col-lg-8 col-md-8 col-sm-8 col-xs-8div"><span ng-repeat="oldValue in history.oldValueSelected.split(', ')" ng-bind="oldValue"></span></div>

. but no luck.

Guest Over a year ago

@Karthikeyan That should split the string in an array, you would need to add a container/wrapper like i did with <div layout="column">. Because divs are block-level elements, your div with ng-repeat should break - otherwise you can try to add display: block; Edit: I inserted the code of your second comment and got the expected output. Can you try it with class="column"?

Karthikeyan Over a year ago

Tried with <div layout="column"> its not working., how to do with display: block;

Guest Over a year ago

I tried it with your code and didn't get the expected output. I changed class="row" to layout="row" and the output was like this: drive.google.com/file/d/1zYM7lz97jCtpGHQX_YpcsA72dG8kHKAv/…

|

vikas biradar · Accepted Answer · 2019-01-24 09:44:21Z

0

app.component.html
<div *ngFor="let hero of heroes.split(', ')">
 {{ hero }}
</div>

app.component.ts
private  heroes: string = "123123, 123123, 345354, 5675757";

Output:

answered Jan 24, 2019 at 9:44

vikas biradar

2981 gold badge3 silver badges12 bronze badges

Collectives™ on Stack Overflow

HTML - split the array values dynamically using comma seperated

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related