Question

我需要在角度js中开发一个表来显示第三方数据（因此无法更改数据）。
要显示的数据完全是动态的，因为数字或列的顺序可以随时更改。
要显示的值可以是数字，字符串或日期，由第三方数据管理。
我需要在点击任何标题
我知道一些技巧，比如使用|数字过滤器等，但它似乎不适用于这种动态环境

因此我需要让我的桌子完全动态。但是我在使用订单方面遇到了问题，因为它会对偶数和日期进行排序，将它们视为字符串。

    <table>
<td ng-repeat="key in keys(Header[0])" ng-click="maintainOrder(key)" >
        <span>{{Header[0][key]}}</span> 
    </td>

<tr ng-repeat="singleRow in data | orderBy:orderByCriteria:reverseSort" >
       <td ng-repeat="key in keys(data[0])" >
       {{singleRow[key]}}
       </td>

    </tr>
</table>


    $scope.maintainOrder = function(key)
  {
   $scope.orderByCriteria = key;
   $scope.reverseSort = ! $scope.reverseSort;
  };
  $scope.keys = function(obj){
   console.log((Object.keys(obj)));
   return obj? Object.keys(obj) : [];
  };
  $scope.data= [
                {
               "quantity" : "85",
               "type" : "mango",
               "expiryDate" : "15/09/2015"
                },
                {
                "quantity" : "9",
                "type" : "orange",
                "expiryDate" : "5/07/2015"
              },
              {
                "quantity" : "66",
                "type" : "apple",
                "expiryDate" : "25/09/2015"
               },
               {
                 "quantity" : "95",
                 "type" : "mango",
                 "expiryDate" : "31/08/2015"
            }
                ];
  $scope.Header= [
                {
               "quantity" : "Qty  ",
               "type" : "Type",
               "expiryDate" : "Expiry_Date"
                }];

我为此提供了一个小提琴： fiddle link

Answer 1

您可以创建自己的自定义排序过滤器，并使用角度内置函数angular.isNumber，angular.isDate，angular.isString

自定义过滤器的示例如下：http://jsfiddle.net/av1mLpqx/1/

在自定义过滤器中，使用如下自定义排序功能：

 array.sort(function (a, b) {
      if (angular.isNumber(a) && angular.isNumber(b)) {
        return a - b;
      } 
      else if (angular.isDate(a) && angular.isDate(b)) {        
        return a.getTime() - b.getTime();
      }
      else if (angular.isString(a) && angular.isString(b)) {
        return a.localeCompare(b);
      }       
      else {
        console.log("types unknown");
        return 0;
      }
}

AngularJS orderby将数字和日期排序，将它们视为字符串

1 个答案: