anglejsフィルタを使ってヘッダにソートを追加するには？

Question

日付ヘッダーにソート機能を追加したいと思いますが、orderByフィルタを追加しましたが、それはその列を破っています。

日付ヘッダーにソートを追加するにはどうすればよいですか？ユーザーがヘッダーをクリックすると、並べ替え順序が変わる可能性があります。

main.htmlを

<table> 
    <tr> 
     <th>File</th> 
     <th>{{date | orderBy: file.fileStat}}</th> 
     <th>Download</th> 
    </tr> 
    <tr ng-repeat="file in data"> 
     <td>{{file.filename}}</td> 
     <td>{{file.fileStat |date : "dd.MM.y"}}</td> 
     <td><button type="button" class="btn btn-primary" ng-click="downloadServerFile(file.filename)">download</button></td> 
    </tr> 
</table> 

Answer 1

あなたがしようとしましたが、あなたは良いスタートを作ったの構文でいくつかのエラー。

最初のエラーはorderBy:がng-repeatディレクティブにのみ適用されることです。

まずは<th>{{date}}</th>を変更しましょう。

次に、ng-repeatを見てみましょう。私たちには2つのものがあります。参照：OrderBy。

文字列を使用して並べ替えるフィールドと、ブール値を使用して、順序を逆にするかどうかを判断できます。そのようなものを試すことができます<tr ng-repeat="file in data | orderBy: 'fileStat': false">。

また、ブール値を変数に設定する必要があります。これにより、ユーザーが変数を変更した時刻を追跡できるようになります。

<tr ng-repeat="file in data | orderBy: 'fileStat': reversed">

最後に、のは、ng-clickを持っているユーザーが順序を変更できるようにしましょう。この例では、<th>に設定します。

<th ng-click="reversed = !reversed">{{date}}</th>

---

これを試してみて、あなたはすべてのエラーに実行する場合、私に知らせてください。