AngularJS orderby sorts number and dates treating them as string

angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

744 просмотра

1 ответ

  • I need to develop a table in angular js to show a third party data (and hence data cannot be changed).
  • Data to be shown is completely dynamic in that number or sequence of columns can change anytime.
  • The value to be displayed may be a number or a string or a date, which is governed by the third party data.
  • I need to sort table on clicking on any of the headers
  • I am aware of some techniques like using | number filter etc, but it does not seem to work in this dynamic environment

Hence I need to make my table as completely dynamic. However I am facing issues in using order by as it sorts even numbers and dates treating them as string.

    <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"
                }];

I have included a fiddle for the same: fiddle link

Автор: shubh Источник Размещён: 08.11.2019 11:23

Ответы (1)


0 плюса

You can create your own custom sort filter, and use the angular built-in functions angular.isNumber, angular.isDate, angular.isString

An example of a custom filter is here: http://jsfiddle.net/av1mLpqx/1/

In your custom filter, use a custom sort function like this:

 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;
      }
}
Автор: Joe Jadamec Размещён: 20.08.2016 07:30
Вопросы из категории :
32x32