Rohan Sampat
Rohan Sampat

Reputation: 970

Hide html element with same data in ng-repeat in angularjs

I have a array of task in which there are two duplicate departments, but i dont want to show the second duplicate record in ng-repeat, but only for the first record i want to show even if it is duplicate. Here is my code, can anyone tell me where i'm going wrong.

<tr ng-repeat="t in item.requisitionTask track by t.id">
<td>
<div ng-hide="!$first ? item.requisitionTask[$index-1].department.departmentCode==$index.department.departmentCode : false">
{{t.department.departmentName}}</div>
</td>

Upvotes: 0

Views: 597

Answers (2)

David L
David L

Reputation: 33815

I suspect that you want to hide data if the previous item contains the same departmentCode as your current item. As mentioned in my comment, you should move this logic into a function on your controller's scope.

<tr ng-repeat="t in item.requisitionTask track by t.id">
  <td>
    <div ng-hide="isNotFirstOrSameCodeAsPrevious($index)">
        {{t.department.departmentName}}
    </div>
  </td>
</tr>

In your controller:

function isNotFirstOrSameCodeAsPrevious($index) {
    if ($index === 0) return false;

    return item.requisitionTask[$index - 1].department.departmentCode ===
        item.requisitionTask[$index].department.departmentCode; 
}

Upvotes: 1

Rohan Sampat
Rohan Sampat

Reputation: 970

Solved it by targeting the data particularly.

<td><div ng-hide="!$first ? item.requisitionTask[$index-1].department.departmentCode==item.requisitionTask[$index].department.departmentCode : false">

Upvotes: 1

Related Questions