hjm hjm -4 years ago 111
AngularJS Question

Angular 1.5 hide repeated value on ng-repeat

I am creating a table in Angular, my issue is that when I loop through the array of items I have a value that repeats(syscode). I was wondering if there is a way to hide value that have already been displayed in the table here is how the data structure looks.







Where syscode will alway containt the same value twice, is there anyway to only show it once in Angular when looping through the array? Thank you

<tr ng-repeat="value in sd.data | orderBy: sd.sort_by.col:sd.sort_by.reverse">
<td class="text-center no-wrapping">{{value.syscode}}</td>
<td class="text-center no-wrapping">{{value.sig_epoch_utc}}</td>
<td class="text-center ">{{value.num_of_signals}}</td>
<td class="text-center no-wrapping">{{value.status_code}}</td>
<td class="text-center no-wrapping">{{value.status_note}}</td>
<tr >

Answer Source

You can inject angular-ui with angular and use 'unique' filter inorder to filter out the unique values based on property,

Just update it as,

<tr ng-repeat="value in sd.data | orderBy: sd.sort_by.col:sd.sort_by.reverse | unique:'syscode'">


<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
    <p ng-repeat="x in data.response | unique: 'ename'">{{x.ename}}</p>
//App declaration
var app = angular.module('myApp',['ui.filters']);
//Controller Declaration
    $scope.data = {"response": [
            "sid": 1,
            "eid": "AA",
            "ename": "AA11"
            "sid": 2,
            "eid": "AA",
            "ename": "AA11"
    "status": "success"

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download