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。有两件事对我们有用。请参阅：OrderBy。

所以我们可以告诉它，使用String，哪个字段进行排序，并使用布尔值，是否反转顺序。我们可以尝试<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>

请尝试这个，如果您遇到任何错误，请告诉我。

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

1 个答案: