カスタムフィルタを作成する際のトラブルシューティング

Question

私は自分のプロジェクトでangularjsを使用しています。

ng-repeatで配列をフィルタリングしたいと思います。ここで

はHTMLである：ここでは

<tbody> 
    <tr ng-repeat="sensorData in list.sensorsData | 
           filterByAlert:list.alertTags"> 
     <td> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="text-center">{{ sensorData.Area }}</div> 
       </div> 
      </div> 
     </td> 
    </tr> 
</tbody> 

は、オブジェクトのlist.sensorsData配列をどのように見えるかです：ここでは

は、オブジェクトのlist.alertTags配列をどのように見えるかです：

ng-repeat要素に表示する必要があるのは、list.sensorsという行で、list.alertTagsのidプロパティに等しいalertTypeプロパティ値を持つ行です。この目的のために

私はこのフィルタを書いた：

(function() { 
    "use strict"; 

    angular.module("sensorsData").filter('filterByAlert', filterByAlert); 

    function filterByAlert() { 
     var result = []; 
     return function (sensorRecords, alertTypes) { 
      if (!sensorRecords) 
       return; 
      if (!alertTypes) 
       return; 
      angular.forEach(sensorRecords, function (sensorRecord, key) { 
       angular.forEach(alertTypes, function (alertType, key2) { 
        if (sensorRecord.AlertType == alertType.Id) { 
         result.push(sensorRecord); 
        } 
       }) 
      }); 
      return result; 
     } 
    }; 
})(); 

が、フィルタが発射されたとき、私はこのエラーを取得：

angular.js:13424 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: sensorData in list.sensorsData | 
            filter:filterByAddress | 
            orderBy:sortType:sortReverse | 
            filterByAlert:list.alertTags, Duplicate key: object:8, Duplicate value: {"Id":8,"Address":"125 king g.str","AlertType":3,"Area":"North","MeasureDate":"2012-10-12T16:10:00","MeasureValue":-1} 

私が私のカスタムフィルター内のロジックに問題があるようです。

なぜエラーが出るのですか？それを修正する方法はありますか？

Answer 1

あなたのng-repeatにtrack by $indexを追加してください。

<tr ng-repeat="sensorData in list.sensorsData | filterByAlert:list.alertTags track by $index">