Angular 1.5 hide repeated value on ng-repeat
Question
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 >
2 answers
solution1
1 2017-05-22 18:20:10
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
solution2
1 ACCPTED 2017-05-22 18:29:34
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.