Trigger value change in json from ng repeat - html

Question

I have Following Json:
{
"FunctionIs": [{
"id": 1,
"name": "Test",
"Type": "A"
}, {
"id": 2,
"name": "Test2",
"Type": "A"
},{
"id": 3,
"name": "Test3",
"Type": "A"
},{
"id": 4,
"name": "Test4",
"Type": "A"
},{
"id": 5,
"name": "Test5",
"Type": "B"
},{
"id": 6,
"name": "Test6",
"Type": "B"
},{
"id": 7,
"name": "Test7",
"Type": "C"
},{
"id": 8,
"name": "Test8",
"Type": "C"
},]
}
I am populating these values through ng-repeat in my html:
<tr ng-repeat="businessdata in userObj.businessJson">
<td id="idIs">{{businessdata.id}}</td>
<td>{{businessdata.name}}</td>
</tr>
Whenever there is change in "Type" (From A to B and B to C and C to D and so on), I want to insert a new <tr> for displaying the heading(Type) only for the first time. Can anyone help in this?
Thanks!

Answer 1

You could create create 3 different ng-repeat each for different type.
e.g.
<tr><th>A</th></tr>
<tr ng-repeat="item in data | filter: {Type:'A'}">
<td>{{item.name}}</td>
<td>{{item.id}}</td>
</tr>
<tr><th>B</th></tr>
<tr ng-repeat="item in data | filter: {Type:'B'}">
<td>{{item.name}}</td>
<td>{{item.id}}</td>
</tr>
<tr><th>C</th></tr>
<tr ng-repeat="item in data | filter: {Type:'C'}">
<td>{{item.name}}</td>
<td>{{item.id}}</td>
</tr>
Here's a working plunker