Jibo Jibo - 4 months ago 46
AngularJS Question

Nested ng-repeat to create multiple table with different data

I have Json data

[{"ID": "01000", "Name" : "Name1", "Age" : 25},
{"ID": "01001", "Name" : "Name2", "Age" : 30},
{"ID": "01001", "Name" : "Name3", "Age" : 23}]


and want to show this data in multiple table using ng-repeat. table should look like this

How the tables should look like

I've created function which locates Distinct ID's into "$scope.ID" variable.

$scope.ID = [];
$scope.ID.push("1");
var s = 0;
for (var i = 0; i < $scope.Report.length; i++){

if ($scope.ID[s] != $scope.Report[i].Id){
$scope.ID.push($scope.Report[i].Id);
s++;
}
}


then i'm trying to display data into table in this way

<div class="table" ng-repeat="id in ID" ng-model="quary">

<div class="row header">
<div class="cell">
ID
</div>
<div class="cell">
NAME
</div>
<div class="cell">
AGE
</div>
</div>


<div class="row" ng-repeat="r in Report | filter: quary track by $index">
<div class="cell">
{{r.id}}
</div>
<div class="cell">
{{r.name}}
</div>
<div class="cell">
{{r.age}}
</div>

</div>
</div>


Script returns two table but, each table has the same three value,

What the tables actually look like

I need that each generated table had own filter value, for this case first table should be filtered by ID: 01000 and second table By ID: 01001.

What should i do for this?

Answer

Try:

<div class="row header">
  <div class="cell">
    ID
  </div>
  <div class="cell">
    NAME
  </div>
  <div class="cell">
    AGE
  </div>
</div>


<div class="row"  ng-repeat="r in Report | filter: {id: id}">
  <div class="cell">
    {{r.id}}
  </div>
  <div class="cell">
    {{r.name}}
  </div>
  <div class="cell">
   {{r.age}}
  </div>

</div>

Comments