Question

我从Web API检索以下记录：

FullRecord
_______
RecordID
RecordDate
PersonName
RecordNote
LineOrder

数据来自JSON格式的Web API。

内容是这样的：

RecordID    RecordDate  PersonName  RecordNote  LineOrder
1           10/25/2016  John Doe    test1       1
1           10/25/2016  John Doe    test2       2
1           10/25/2016  John Doe    test3       3
2           10/25/2016  Jane Doe    testing23   1
2           10/25/2016  Jane Does   testing27   2

我用AngularJS应用程序显示它如下：

 <tbody>
          <tr ng-repeat="Record in Records">
                    <td>{{Record.RecordID}}</td>
                    <td>{{Record.RecordDate}}</td>
                    <td>{{Record.PersonName}}</td>
                    <td>{{Record.RecordNote}}</td>
                    <td>{{Record.LineOrder}}</td>
        </tr>
 </tbody>

这样，前3个字段对于具有相同记录ID的每个记录重复。我想知道如果不重复，我是否能够以某种方式连续显示RecordID，RecordDate和Person Name。

例如：

RecordID    RecordDate  PersonName  RecordNote  LineOrder
1   10/25/2016  John Doe    test1       1
                            test2       2
                            test3       3
2   10/25/2016  Jane Doe    testing23   1
                            testing27   2

如何使用Angular实现这一目标？

Answer 1

您可以使用unique过滤器来实现此目的。这不是Angular的一部分，但可以在Angular UI中使用here

<tbody>
          <tr ng-repeat="Record in Records | unique:'RecordId'"">
                    <td>{{Record.RecordID}}</td>
                    <td>{{Record.RecordDate}}</td>
                    <td>{{Record.PersonName}}</td>
                    <td>{{Record.RecordNote}}</td>
                    <td>{{Record.LineOrder}}</td>
        </tr>
 </tbody>

像这样定义过滤器：

.filter('unique', function () {

 return function (items, filterOn) {

if (filterOn === false) {
  return items;
}

if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
  var hashCheck = {}, newItems = [];

  var extractValueToCompare = function (item) {
    if (angular.isObject(item) && angular.isString(filterOn)) {
      return item[filterOn];
    } else {
      return item;
    }
  };

  angular.forEach(items, function (item) {
    var valueToCheck, isDuplicate = false;

    for (var i = 0; i < newItems.length; i++) {
      if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
        isDuplicate = true;
        break;
      }
    }
    if (!isDuplicate) {
      newItems.push(item);
    }

  });
  items = newItems;
}
return items;
};
});

如何在AngularJS

1 个答案: