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-重複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>