javascript - 如果表达式包含点，OrderBy 过滤器将失败

Question

我有一个动态变化的 orderBy 过滤器。

我的 HTML 调用 updateOrder() 方法，该方法采用参数“日期”、“值”、“seller.name”、“buyer.name”等:

<button type="button" ng-click="updateOrder('date')" class="btn btn-default navbar-btn">Date</button>
<button type="button" ng-click="updateOrder('value')" class="btn btn-default navbar-btn">Valuation</button>
<button type="button" ng-click="updateorder('seller.name')" class="btn btn-default navbar-btn">Alphabetical</button>

我的 updateOrder() 方法检测是否需要颠倒顺序以及按什么对列表进行排序:

$scope.order = 'date';
$scope.reverse = true;
let current = $scope.order;
$scope.updateOrder = function(order) {
    console.log(order);
    if(current === order) {
        $scope.reverse = !$scope.reverse;
    } else if(!$scope.reverse) {
        $scope.reverse = true;
        $scope.order = order;
        current = order;
    } else {
        $scope.order = order;
        current = order;
    }
}

然后我的 ng-repeat div 使用这个顺序过滤器:

orderBy:order:reverse

出于某种原因，每当我传递带有点(句点)的参数时，过滤器就会失败并且顺序不会改变。由于其他限制，我不想将数据库架构更改为没有子类别(buyer.name、seller.name 等)。有办法解决这个问题吗？

Answer 1

通过点符号属性进行排序没有问题。问题是您有 ng-click="updateorder('seller.name')" 并且它应该是 ng-click="updateOrder('seller.name')".您的函数调用中有一个小写“o”。工作示例:

angular.module('app', [])
    .controller('ctrl', function($scope) {
        $scope.order = 'date';
        $scope.reverse = true;
        let current = $scope.order;
        $scope.updateOrder = function(order) {
            if (current === order) {
                $scope.reverse = !$scope.reverse;
            } else if (!$scope.reverse) {
                $scope.reverse = true;
                $scope.order = order;
                current = order;
            } else {
                $scope.order = order;
                current = order;
            }
        }

        $scope.items = [{
            date: new Date('2016-01-01'),
            value: 100,
            seller: {
                name: 'Smith'
            }
        }, {
            date: new Date('2016-05-01'),
            value: 50,
            seller: {
                name: 'Smiley'
            }
        }, {
            date: new Date('2016-03-01'),
            value: 25,
            seller: {
                name: 'Jones'
            }
        }, {
            date: new Date('2016-08-01'),
            value: 500,
            seller: {
                name: 'Johnson'
            }
        }];
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
    <div>
        <button type="button" ng-click="updateOrder('date')" class="btn btn-default navbar-btn">Date</button>
        <button type="button" ng-click="updateOrder('value')" class="btn btn-default navbar-btn">Valuation</button>
        <button type="button" ng-click="updateOrder('seller.name')" class="btn btn-default navbar-btn">Alphabetical</button>
    </div>
    <table>
        <tr>
            <th>Date</th>
            <th>Value</th>
            <th>Seller</th>
        </tr>
        <tr ng-repeat="item in items | orderBy:order:reverse">
            <td>{{item.date | date: "M/d/yyyy"}}</td>
            <td>{{item.value}}</td>
            <td>{{item.seller.name}}</td>
        </tr>
    </table>
</div>