Angular Js中的双面排序

时间:2019-07-13 05:55:19

标签: javascript html angularjs spring-boot thymeleaf

我有一个显示的表格,其中填充了字段。我想对列进行双面排列。但是,只有单面有效。

我尝试切片以添加可交换-和+添加以更改订单。

html文件。

// For Product Table.
<table border="1">
    <thead>
        <tr>
            <th ng-click="customOrderBy('id')">Id</th>
            <th ng-click="customOrderBy('name')">Name</th>
            <th ng-click="customOrderBy('age')">Age</th>
            <th ng-click="customOrderBy('school')">School</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr .....>
            <td>.....</td>
            <td>.....</td>
            <td>.....</td>
            <td>.....</td>
            <td>
                <!--Old Action Buttons  
                        <button .....>....</button>-->
                <button .....>.....</button>

                <!--Old Action Buttons  
                        <button .....>.....</button>-->
                <button .....>.....</button>
            </td>
        </tr>
    </tbody>
</table>

app.js文件功能。

// Double Sided Sorting.
$scope.customOrderBy = function (columnName) {
    // var currentColumnName = $scope.myOrderBy.slice(1);
    // var currentDirection = $scope.myOrderBy.slice(0, 1);
    // var direction = '-';
    // if (columnName === currentColumnName) {
    //     direction = (currentDirection == '+' ? '-' : '+');
    // }
    // $scope.myOrderBy = direction + columnName;

    $scope.myOrderBy = columnName;
}

当我点击标题顺序时,方向应该改变。

1 个答案:

答案 0 :(得分:0)

以此更改您的app.js功能customOrderBy。

可以。

app.js文件功能。

// Double Sided Sorting.
$scope.customOrderBy = function (columnName) {
    // var currentColumnName = $scope.myOrderBy.slice(1);
    // var currentDirection = $scope.myOrderBy.slice(0, 1);
    // var direction = '-';
    // if (columnName === currentColumnName) {
    //     direction = (currentDirection == '+' ? '-' : '+');
    // }
    // $scope.myOrderBy = direction + columnName;
    if ($scope.myOrderBy === columnName) {
        $scope.myOrderBy = '-' + columnName;
    }
    else if ($scope.myOrderBy === '-' + columnName) {
        $scope.myOrderBy = columnName;
    }
    else {
        $scope.myOrderBy = columnName;
    }
    // $scope.myOrderBy = columnName;
}