2016-10-25 5 views
0

で繰り返しフィールドを省略したレコードを表示するために、私は私がWeb APIから取得しています以下のレコードを持っている:どのようにAngularJS

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アプリケーションwithiそれを表示しています:最初の3つのフィールドが同じでレコードごとに繰り返している

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

この道を

内容は次のようなものですレコード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 

答えて

0

これを実現するには、uniqueフィルタを使用できます。

.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; 
}; 
}); 
:これはそうのようなフィルタを定義する角度の一部ではなく、角度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> 

関連する問題