user1452221 user1452221 - 1 month ago 7
AngularJS Question

repeating the first line just once ng-repeat

I have a mongodb collection with this parameters:

{
"_id": ObjectId("59c265235e21f8a8b7d75b23"),
"email": "tworsnipi@bbc.co.uk",
"password": "PlPEVQpAt",
"company_name": "Oyope",
"site": "noaa.gov",
"description": "lorem id ligula suspendisse ornare",
"ads": [{
"id": 19,
"users_apply": [],
"email": "bmenguyi@utexas.edu",
"phone": "(847) 2671999",
"location": {
"longtitude": -88.0549221,
"latitude": 42.1165506
},
"status": "open",
"skills": ["Financial Analysis"],
"scope": "half"
}]
}


I would like to show the company_name, and all the elements that are in the array "ads".

for that I have done this:

<tr ng-repeat="ad in pubJobs2 | filter:{company_name: search.company_name} | limitTo : 10 : begin()">
<td><a ng-click="loadJob(ad.company_name)">{{ad.company_name}}</a></td>
<td>

<table>
<tr>
<td>email</td>
<td>Phone</td>
<td>location</td>
<td>description</td>
<td>scope</td>
<td>status</td>
<td>skills</td>
<td></td>
</tr>

<tr ng-repeat="adv in ad.ads | filter:{email: search.email, scope: search.scope} ">
<td>{{adv.email}}</td>
<td>{{adv.phone}}</td>
<td>{{adv.location}}</td>
<td>{{adv.description}}</td>
<td>{{adv.scope}}</td>
<td>{{adv.status}}</td>
<td>{{adv.skills}}</td>
<td><button class="button" ng-click="applyJob(adv.id)">Apply</button></td>
</tr>
</table>
</td>

</tr>

</tr>
</table>


the problem is that the titles are repeating too.
How could I avoid it?

Answer Source

This isn't using your data, but this shows how you can use the (often misused) ngInit directive to grab a reference to the previous record in an ngRepeat. As you can see, I simply suppress the category unless it has changed from the previous record.

http://plnkr.co/edit/WtO3AzWokzpbG5YIPSYP?p=preview

<table >
  <tr>
    <td>Category</td>
    <td>Name</td>
  </tr>
  <tr ng-repeat="food in $ctrl.data" ng-init="prevFood = $ctrl.data[$index-1]">
    <td>{{prevFood.category !== food.category ? food.category : '&nbsp;'}}</td>
    <td>{{food.name}}</td>
  </tr>
</table>