2017-12-19 12 views
4

ng-repeatを使用してデータが移入されているテーブルのシリアル番号を表示したいとします。私が持っているコードは、このようなものです。

<tr ng-repeat="usageRecord in applicationUsageDataForReport"> 
    <td style="text-align: center"><span>{{$index+1}}</span></td> 
    <td style="padding-left: 5px; max-width: 200px; text-align: center; width:100px;"> 
    <span>{{usageRecord.ibu}}</span> 
    </td> 
</tr> 

うまくいきます。シリアル番号は期待どおりに来ています。しかし、ng-repeatに条件を追加すると、ng-ifを使用して、$indexという値は、シリアル番号を非順不同で満たす条件を満たしているレコードにのみ適用されます。これは私が正しい順序(1,2,3 ..)でシリアル番号を取得できるようにするためのものです。

+1

'NG-show'はあなたのためのオプションである場合は、代わりに' NG-if'のこの1を使用することを検討してください。 'ng-show'はDOMから要素を削除しないので、割り当てられた' $ index'は "消えません"。 – lealceldeiro

+1

@lealceldeiroテーブルのデータがJSONとしてサービスから来ているので、ここで 'ng-show'を使用することはできません。条件を満たすJSONのレコードのみを表示する必要があります –

+2

[フィルタ](http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/filtering-and-sorting-a-list.html)?これにより、インデックスがフィルタリングされたリストを参照する必要があります。 – Razzildinho

答えて

3

ng-repeatフィルタ方法の使い方を示すplnkrを作成しました。 demo

HTML:

<tr ng-repeat="usageRecord in applicationUsageDataForReport | filter:filterFunction"> 
    <td style="text-align: center"><span>{{$index+1}}</span></td> 
    <td style="padding-left: 5px; max-width: 200px; text-align: center; width:100px;"><span>{{usageRecord.ibu}}</span></td> 
</tr> 

JS:

$scope.filterFunction = function(item){ 
    /* return true if included false if excluded */ 
    return true; 
}; 
関連する問題