javascript - 如何使用 angularjs 过滤器在标题上添加排序？

Question

我想在日期标题上添加排序功能，我添加了 orderBy 过滤器，但它破坏了列。

如何向日期标题添加排序？我希望用户可以单击标题，这应该更改排序顺序。

ma​​in.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 。有两件事对我们有用。请参阅:OrderBy .

因此我们可以使用字符串告诉它要对哪个字段进行排序，并使用 bool 值告诉它是否反转顺序。我们可以尝试这样的<tr ng-repeat="file in data | orderBy: 'fileStat': false"> .

我们还应该将 bool 值设置为变量，以便我们可以跟踪用户何时更改它。

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

最后，让我们来看看 ng-click ，允许用户更改顺序。在此示例中，我将其设置为 <th> .

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

<小时/>

请尝试此操作，如果遇到任何错误请告诉我。