CODEWITHSUNDEEP
javascriptangularjs
hjm
hjm

Reputation: 1943

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.

syscode

out_signal_id

sig_epoch_utc

num_of_signals

status_code

status_note

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>{{value.out_signal_id}}</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 >

Upvotes: 1

Views: 242

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222582

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'">

DEMO

<html>
<head>
<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>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <p ng-repeat="x in data.response | unique: 'ename'">{{x.ename}}</p>
<script>
//App declaration
var app = angular.module('myApp',['ui.filters']);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.data = {"response": [
        {
            "sid": 1,
            "eid": "AA",
            "ename": "AA11"
          },{
            "sid": 2,
            "eid": "AA",
            "ename": "AA11"
          }
    ],
    "status": "success"
};
});
</script>
</body> 
</html>

Upvotes: 1

Arda Ntourali
Arda Ntourali

Reputation: 71

AngularUI has a unique filter.

Eg.:

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

Edit: Misstyped AngularJS instead of AngularUI

Upvotes: 1

Related Questions