AngularJS Comma separated from Dynamic JSON data using ng-repeat-CodePudding

I am working on old Angular js version (1.7.9). I have a following JSON string from server and need to show the data in PIVOT table and I am able to display the data in PIVOT format. I have given the html below. My issue is I need to split each comma inside ng-repeat. As of now the comma is showing as it is.

I don't need to split last comma in json string. for eg: ("G": "1,37.5",) only split 1,37. What I mean, split only inside double qoutes.

In JSON string we can see that 3,0 and 1,20 etc. I need to split each item and store in separate span tags in a cell.

Json format

[
  {
    "NAME": "d1",
    "Pro_id": "421",
    "N": "3,0",
    "S": "3,0",
    "G": "1,37.5",
    "I": "3,0",
    "E": "0",
    "Sor": "3,0",
    "custom": "3,0"
  },
  {
    "NAME": "d2",
    "pro_id": "601",
    "N": "3,0",
    "S": "1,20",
    "G": "3,0",
    "I": "3,0",
    "E": "0",
    "S": "3,0",
    "c": "3,0"
  }
]

HTML version

<table>
                <thead>
                    <tr>



                    <tr >
                        <th ng-click="Cluster(key)" ng-repeat="(key, val) in DashboardSummary[0]">{{ key }}</th>
                    </tr>
                    <tr style="color:mediumslateblue" ng-show="DashboardSummary!='undefined' && DashboardSummary!='null' && DashboardSummary.length!=0" ng-repeat="row in DashboardSummary">
                        
                        <td style="border:0.01em outset;border-color:black" ng-repeat="column in row track by $index">
                            {{ column }}
                        </td>
                    </tr>
                    <tr>
                        <td style="border:none;" ng-show="DashboardSummary=='undefined' ||DashboardSummary=='null' || DashboardSummary.length==0 ">
                            No data Available.
                        </td>
                    </tr>





            </table>

In JS file I have. DashboardData.data contains above JSON data.

$scope.DashboardSummary = JSON.parse(DashboardData.data);

CodePudding user response：

var app = angular.module('app', []);

app.controller('DashboardController', DashboardController);
app.directive('displayColumnDirective', DisplayColumnDirecive);

function DisplayColumnDirecive(){
    return {
  scope: {
  value: '='
  },
  template:'<span ng-repeat="split in splitted">{{split}}</span>',
  link: function(scope,attr){
  scope.splitted = [];
  if(!scope.value){
  return;
  }
  scope.splitted = scope.value.split(',')
  }
  
  }
}

function DashboardController($scope) {
    $scope.rows = [
  {
    "NAME": "d1",
    "Pro_id": "421",
    "N": "3,0",
    "S": "3,0",
    "G": "1,37.5",
    "I": "3,0",
    "E": "0",
    "Sor": "3,0",
    "custom": "3,0"
  },
  {
    "NAME": "d2",
    "pro_id": "601",
    "N": "3,0",
    "S": "1,20",
    "G": "3,0",
    "I": "3,0",
    "E": "0",
    "S": "3,0",
    "c": "3,0"
  }
];
}

JSFIDDLE

CodePudding user response：

Done this way. The key point is {{val.split(',')[0]}} & {{val.split(',')[1]}}

<tr >
                        <th ng-click="Cluster(key)" ng-repeat="(key, val) in DashboardSummary[0]">{{ key }}</th>
                    </tr>
                    <tr  style="color:mediumslateblue;text-align:center;" ng-show="DashboardSummary!='undefined' && DashboardSummary!='null' && DashboardSummary.length!=0" ng-repeat="row in DashboardSummary">
                        <td style="border:0.01em outset;border-color:black" ng-repeat="(key, val) in row track by $index">
                            <div style="display: flex;justify-content: center;" ng-if="$index>=1" ng->
                            <span style="display: flex;justify-content: center;align-items: center;" id="circle"></span></div>
                            <div ng-if="$index==0">{{val.split(',')[0]}}</div>
                           
                            {{val.split(',')[1]}}<span ng-if="$index>=1 && val.split(',')[1]">%</span>
</td>
                    </tr>
                    <tr>
                        <td style="border:none;" ng-show="DashboardSummary=='undefined' ||DashboardSummary=='null' || DashboardSummary.length==0 ">
                            No data Available.
                        </td>
                    </tr>