Angular 1.5创建一个表,避免重复值

时间:2017-05-25 17:48:11

标签: javascript angularjs

我正在尝试创建一个表,我有以下代码

<tr ng-repeat="value in sd.data>
   <td >{{value.syscode}}</td>
   <td>{{value.out_signal_id}}</td>
   <td>{{value.sig_epoch_utc}}</td>
   <td>{{value.num_of_signals}}</td>
   <td>{{value.status_code}}</td>
   <td>{{value.status_note}}</td>


  <tr >

这是一个示例,在数组被ng-repeat

循环后,表格如何显示
syscode | out_signal_id  | sig_epoch_utc | num_of_signals | status_code | status_note


2221111 |   12323454343  | 2093236693029 | 120000000000   | 3030000000|  no-errors

2221111 |   12323454343  | 2093235593029 | 120000000000   | 3030000000| no-errors-1

2221111 |   12323454343  | 2093233393029 | 120000000000   | 3030000000| no-errors-2

我试图跳过'syscode'上的重复值,在这种情况下,我只需要一个'2221111'而不是其中的3个,我确实通过其他答案查找类似于这个的问题,但是没有回答我的问题。任何答案将不胜感激!

3 个答案:

答案 0 :(得分:1)

如果状态记录始终为“无错误”。这是你想要的数据行,然后可以使用ng-if指令轻松修复。否则,我建议过滤数据集并删除重复值并将该数组放在范围内或创建过滤器。

<tr ng-repeat="value in sd.data" ng-if="value.status_note === 'no-errors'>
   <td >{{value.syscode}}</td>
   <td>{{value.out_signal_id}}</td>
   <td>{{value.sig_epoch_utc}}</td>
   <td>{{value.num_of_signals}}</td>
   <td>{{value.status_code}}</td>
   <td>{{value.status_note}}</td>
  <tr >

答案 1 :(得分:1)

您可以在^(3\.[5-9][0-9]*|4(\.([0-2][0-9]*|3))?)$ 属性上执行“唯一”过滤器。你必须得到Angular-UI:

syscode

将其添加为模块依赖项:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>

然后指定过滤器:

var app = angular.module('yourProjectName', ['ui.filters']);

答案 2 :(得分:1)

这是一个工作的plunker: https://plnkr.co/edit/zWXR7k2H9hMwza5H2ZfU?p=preview

我假设行将根据syscode进行排序,所有具有相同syscode的行都将相邻。

通过$ index ng-repeat="value in sd.data track by $index"跟踪ng-repeat,并将当前行中syscode的值与前一行进行比较。如果相同,则显示空白值。 <td>{{($index>0 && sd.data[$index].syscode === sd.data[$index-1].syscode) ? '' : value.syscode}}</td>