AngularJS: Custom Sorting Function using OrderBy

angularjs angularjs-orderby
17,146

In this plunker you can find an example of what you'r looking for with other stuff, hope this help.

Update:

As blazemonger requested the code:

Controllers.js:

app.controller('ctrlRead', ['$scope', '$filter', 'Items', function($scope, $filter, Items) {
  // init
  $scope.sortingOrder  = sortingOrder;
  $scope.reverse       = false;
  $scope.filteredItems = [];
  $scope.groupedItems  = [];
  $scope.itemsPerPage  = 5;
  $scope.pagedItems    = [];
  $scope.currentPage   = 0;
  //#####################################
  // get the items from the Items service
  Items.then(function(data){
    $scope.items = data;
    $scope.search();
  });
  //#####################################
  var searchMatch = function (haystack, needle) {
    if (!needle) {
      return true;
    }
    return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
  };
  // init the filtered items
  $scope.search = function () {
    $scope.filteredItems = $filter('filter')($scope.items, function (item) {
      for(var attr in item) {
        if (searchMatch(attr, $scope.query)){
          return true;
        }
      }
      return false;
    });
    // take care of the sorting order
    if ($scope.sortingOrder !== '') {
      $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
    }
    $scope.currentPage = 0;
    // now group by pages
    $scope.groupToPages();
  };
  // calculate page in place
  $scope.groupToPages = function () {
    $scope.pagedItems = [];
    for (var i = 0; i < $scope.filteredItems.length; i++) {
      if (i % $scope.itemsPerPage === 0) {
        $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
      } else {
        $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
      }
    }
  };
  $scope.range = function (start, end) {
    var ret = [];
    if (!end) {
      end   = start;
      start = 0;
    }
    for (var i = start; i < end; i++) {
      ret.push(i);
    }
    return ret;
  };
  $scope.prevPage = function () {
    if ($scope.currentPage > 0) {
      $scope.currentPage--;
    }
  };
  $scope.nextPage = function () {
    if ($scope.currentPage < $scope.pagedItems.length - 1) {
      $scope.currentPage++;
    }
  };
  $scope.setPage = function () {
    $scope.currentPage = this.n;
  };
  // change sorting order
  $scope.sort_by = function(newSortingOrder) {
    if ($scope.sortingOrder == newSortingOrder){
      $scope.reverse = !$scope.reverse;
    }
    $scope.sortingOrder = newSortingOrder;
    // icon setup
    $('th i').each(function(){
        // icon reset
        $(this).removeClass().addClass('icon-sort');
    });
    if ($scope.reverse){
      $('th.'+newSortingOrder+' i').removeClass().addClass('icon-chevron-up');
    }else{
      $('th.'+newSortingOrder+' i').removeClass().addClass('icon-chevron-down');
    }
  };
}]);

app.js:

var app = angular.module('plunker', []);

items.json:

[
    {
    "ProgramCode":"3DS",
    "ProgramGroup":"NCIM",
    "EventCode":"20130424TX3DS",
    "StartDate":"2013-04-22 00:00:00",
    "FormalDate":"April 22-24, 2013",
    "LocCity":"Richardson",
    "LocState":"TX",
    "LocAddress":"3400 Waterview Parkway, #200",
    "LocName":"America First Insurance Company",
    "Price":"0.00",
    "LicenseeURL":null,
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"1",
    "LocLatitude":"32.9695",
    "LocLongitude":"-96.7409",
    "EventType":"SSIH",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Richardson, TX",
    "cls":"LIMITED_SEATS"
  },
  {
    "ProgramCode":"PA",
    "ProgramGroup":"CISR",
    "EventCode":"20130422SDPA",
    "StartDate":"2013-04-22 00:00:00",
    "FormalDate":"April 22, 2013",
    "LocCity":"Rapid City",
    "LocState":"SD",
    "LocAddress":"445 Mt. Rushmore Road",
    "LocName":"Adoba Eco Hotel Rapid City \/ Mt. Rushmore",
    "Price":"150.00",
    "LicenseeURL":null,
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"19",
    "LocLatitude":"44.0853",
    "LocLongitude":"-103.213",
    "EventType":"SS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Rapid City, SD",
    "cls":"LIMITED_SEATS"
  },
  {
    "ProgramCode":"RME",
    "ProgramGroup":"CRM",
    "EventCode":"20130425FLRME",
    "StartDate":"2013-04-22 00:00:00",
    "FormalDate":"April 22-25, 2013",
    "LocCity":"Orlando",
    "LocState":"FL",
    "LocAddress":"8101 World Center Dr.",
    "LocName":"Caribe Royale",
    "Price":"430.00",
    "LicenseeURL":"http:\/\/www.faia.com\/PV\/Core\/Events\/Events.aspx",
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"32",
    "LocLatitude":"28.3916",
    "LocLongitude":"-81.4734",
    "EventType":"LSIHOERS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Orlando, FL",
    "cls":""
  },
  {
    "ProgramCode":"ALM",
    "ProgramGroup":"CISR",
    "EventCode":"20130423MNALM",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Shoreview",
    "LocState":"MN",
    "LocAddress":"1000 Gramsie Road",
    "LocName":"Hampton Inn",
    "Price":"0.00",
    "LicenseeURL":"http:\/\/www.iiaba.net\/MN\/03_Education\/01_Calender\/NAV_EDUCalendar?ContentPreference=MN&ActiveState=MN&ActiveTab=NA&ContentLevel1=EDUCTN&ContentLevel2=EDUCAL",
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"40",
    "LocLatitude":"45.0856",
    "LocLongitude":"-93.1353",
    "EventType":"LS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Shoreview, MN",
    "cls":""
  },
  {
    "ProgramCode":"AO",
    "ProgramGroup":"CISR",
    "EventCode":"20130423ILAO",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Bannockburn",
    "LocState":"IL",
    "LocAddress":"1500 South Lakeside Drive",
    "LocName":"Mesirow Financial",
    "Price":"0.00",
    "LicenseeURL":"https:\/\/protech.piiai.org\/Events\/CalendarEventsListView.aspx",
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"40",
    "LocLatitude":"42.1693",
    "LocLongitude":"-87.8656",
    "EventType":"LS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Bannockburn, IL",
    "cls":""
  },
  {
    "ProgramCode":"AO",
    "ProgramGroup":"CISR",
    "EventCode":"20130423TXAO",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Richardson (North Dallas)",
    "LocState":"TX",
    "LocAddress":"900 East Lookout Drive",
    "LocName":"Renaissance Dallas-Richardson Hotel",
    "Price":"169.00",
    "LicenseeURL":"http:\/\/www.iiah.org\/displaycommon.cfm?an=1&SUBARTICLENBR=228",
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"16",
    "LocLatitude":"32.9934",
    "LocLongitude":"-96.659",
    "EventType":"SS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Richardson (North Dallas), TX",
    "cls":"LIMITED_SEATS"
  },
  {
    "ProgramCode":"FUN",
    "ProgramGroup":"CSRM",
    "EventCode":"20130423CAFUN",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"San Bernardino",
    "LocState":"CA",
    "LocAddress":"1950 S. Sunwest Lane, Suite 102",
    "LocName":"SCS JPA Conference Center",
    "Price":"179.00",
    "LicenseeURL":null,
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"16",
    "LocLatitude":"34.0807",
    "LocLongitude":"-117.274",
    "EventType":"SS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"San Bernardino, CA",
    "cls":"LIMITED_SEATS"
  },
  {
    "ProgramCode":"IP",
    "ProgramGroup":"CISR",
    "EventCode":"20130423MAIP",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Peabody",
    "LocState":"MA",
    "LocAddress":"43 Newbury Street",
    "LocName":"Springhill Suites by Marriott",
    "Price":"0.00",
    "LicenseeURL":"http:\/\/www.massagent.com\/education\/cisr.cfm",
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"27",
    "LocLatitude":"42.534",
    "LocLongitude":"-70.9615",
    "EventType":"LS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Peabody, MA",
    "cls":""
  },
  {
    "ProgramCode":"IP",
    "ProgramGroup":"CISR",
    "EventCode":"20130423MIIP",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Troy",
    "LocState":"MI",
    "LocAddress":"2601 West Big Beaver Road",
    "LocName":"Somerset Inn",
    "Price":"0.00",
    "LicenseeURL":"http:\/\/www.michagent.org\/eweb\/DynamicPage.aspx?Site=AgentNet2&WebKey=2847b6dd-e47d-40ea-b5d1-504c5ff0f800",
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"46",
    "LocLatitude":"42.5635",
    "LocLongitude":"-83.1841",
    "EventType":"LS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Troy, MI",
    "cls":""
  },
  {
    "ProgramCode":"PA",
    "ProgramGroup":"CISR",
    "EventCode":"20130423CAPA",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Santa Clara (San Jose)",
    "LocState":"CA",
    "LocAddress":"5201 Great America Parkway",
    "LocName":"Network Meeting Center",
    "Price":"169.00",
    "LicenseeURL":null,
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"17",
    "LocLatitude":"37.3932",
    "LocLongitude":"-121.961",
    "EventType":"SS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Santa Clara (San Jose), CA",
    "cls":"LIMITED_SEATS"
  },
  {
    "ProgramCode":"PA",
    "ProgramGroup":"CISR",
    "EventCode":"20130423CTPA",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Middletown",
    "LocState":"CT",
    "LocAddress":"213 Court Street",
    "LocName":"MiddleOak",
    "Price":"0.00",
    "LicenseeURL":"http:\/\/www.pia.org\/EDU\/schedule.php?state=CT",
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"40",
    "LocLatitude":"41.5537",
    "LocLongitude":"-72.6632",
    "EventType":"LS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Middletown, CT",
    "cls":""
  },
  {
    "ProgramCode":"PA",
    "ProgramGroup":"CISR",
    "EventCode":"20130423WVPA",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Charleston",
    "LocState":"WV",
    "LocAddress":"129 Summers Street",
    "LocName":"Summit Conference Center",
    "Price":"150.00",
    "LicenseeURL":"http:\/\/www.ohiopia.com",
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"4",
    "LocLatitude":"38.3506",
    "LocLongitude":"-81.6303",
    "EventType":"SS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Charleston, WV",
    "cls":"LIMITED_SEATS"
  },
  {
    "ProgramCode":"PR",
    "ProgramGroup":"CISR",
    "EventCode":"20130423MEPR",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"South Portland",
    "LocState":"ME",
    "LocAddress":"363 Maine Mall Road",
    "LocName":"DoubleTree by Hilton",
    "Price":"0.00",
    "LicenseeURL":"http:\/\/www.massagent.com\/education\/cisr.cfm",
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"10",
    "LocLatitude":"43.6315",
    "LocLongitude":"-70.2727",
    "EventType":"LS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"South Portland, ME",
    "cls":""
  },
  {
    "ProgramCode":"PR",
    "ProgramGroup":"CISR",
    "EventCode":"20130423MOPR",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Springfield",
    "LocState":"MO",
    "LocAddress":"2720 North Glenstone",
    "LocName":"Holiday Inn Hotel and Suites",
    "Price":"0.00",
    "LicenseeURL":"http:\/\/www.iiaa.org\/MO\/03_Education\/01_Calender\/NAV_EDUCalender?ContentPreference=MO&ActiveState=MO&ActiveTab=STATE&ContentLevel1=EDUCTN&ContentLevel2=EDUCAL",
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"40",
    "LocLatitude":"37.2571",
    "LocLongitude":"-93.2902",
    "EventType":"LS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Springfield, MO",
    "cls":""
  },
  {
    "ProgramCode":"PR",
    "ProgramGroup":"CISR",
    "EventCode":"20130423NCPR",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Greensboro",
    "LocState":"NC",
    "LocAddress":"414 Gallimore Dairy Rd.",
    "LocName":"BB&T Greensboro",
    "Price":"0.00",
    "LicenseeURL":"http:\/\/members.iianc.com\/wcm\/IIANC_Members\/Events\/List\/Core\/Events\/Events.aspx?hkey=90e5e7da-2e1f-4674-ae30-7c12ced0885c",
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"16",
    "LocLatitude":"36.0839",
    "LocLongitude":"-79.9412",
    "EventType":"LSIH",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Greensboro, NC",
    "cls":""
  },
  {
    "ProgramCode":"PR",
    "ProgramGroup":"CISR",
    "EventCode":"20130423NMPR",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Albuquerque",
    "LocState":"NM",
    "LocAddress":"2600 Louisiana, NE",
    "LocName":"Sheraton Albuquerque Uptown",
    "Price":"145.00",
    "LicenseeURL":null,
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"15",
    "LocLatitude":"35.1064",
    "LocLongitude":"-106.579",
    "EventType":"SS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Albuquerque, NM",
    "cls":"LIMITED_SEATS"
  },
  {
    "ProgramCode":"PR",
    "ProgramGroup":"CISR",
    "EventCode":"20130423SDPR",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Rapid City",
    "LocState":"SD",
    "LocAddress":"445 Mt. Rushmore Road",
    "LocName":"Adoba Eco Hotel Rapid City \/ Mt. Rushmore",
    "Price":"150.00",
    "LicenseeURL":null,
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"18",
    "LocLatitude":"44.0853",
    "LocLongitude":"-103.213",
    "EventType":"SS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Rapid City, SD",
    "cls":"LIMITED_SEATS"
  },
  {
    "ProgramCode":"SR",
    "ProgramGroup":"CISR",
    "EventCode":"20130423ORSR",
    "StartDate":"2013-04-23 00:00:00",
    "FormalDate":"April 23, 2013",
    "LocCity":"Portland",
    "LocState":"OR",
    "LocAddress":"8931 SE Foster Road Suite 200",
    "LocName":"Assurety Northwest",
    "Price":"0.00",
    "LicenseeURL":"http:\/\/www.piawest.com\/calendar-of-events",
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"40",
    "LocLatitude":"45.4786",
    "LocLongitude":"-122.562",
    "EventType":"LS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"Portland, OR",
    "cls":""
  },
  {
    "ProgramCode":"ADM",
    "ProgramGroup":"CSRM",
    "EventCode":"20130424CAADM",
    "StartDate":"2013-04-24 00:00:00",
    "FormalDate":"April 24, 2013",
    "LocCity":"San Bernardino",
    "LocState":"CA",
    "LocAddress":"1950 S. Sunwest Lane, Suite 102",
    "LocName":"SCS JPA Conference Center",
    "Price":"179.00",
    "LicenseeURL":null,
    "GateKeeper_length":"0",
    "GateKeeperHTML":null,
    "SeatsAreAvailable":"18",
    "LocLatitude":"34.0807",
    "LocLongitude":"-117.274",
    "EventType":"SS",
    "LocationUnivURL":null,
    "UnivCourseNumber":null,
    "UnivCourseType":"",
    "UnivFaculty":null,
    "Course_Type":"San Bernardino, CA",
    "cls":"LIMITED_SEATS"
  }
]

service.js:

app.factory('Items', ['$http', function($http){
  var Url   = "items.json";
  var Items = $http.get(Url).then(function(response){
     return response.data;
  });
  return Items;
}]);

index.html:

<!doctype html>
<html ng-app="plunker">
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link
    rel="stylesheet"
    href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"
  >
  <link rel="stylesheet" href="style.css">
  <link
    rel="stylesheet"
    href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css"
  >
</head>
<body>
  <script>
    var sortingOrder = 'name';
  </script>
  <div ng-controller="ctrlRead">
    <div class="input-append">
      <input
        type="text"
        ng-model="query"
        ng-change="search()"
        placeholder="Search"
        class="input-large search-query"
      >
      <span class="add-on"><i class="icon-search"></i></span>
    </div>
    <table class="table table-striped table-condensed table-hover">
      <thead>
        <tr>
          <th class="LocName">
            Id&nbsp;
            <a ng-click="sort_by('LocName')">
              <i class="icon-sort"></i>
            </a>
          </th>
          <th class="Price">
            Name&nbsp;
            <a ng-click="sort_by('Price')">
              <i class="icon-sort"></i>
            </a>
          </th>
          <th class="Course_Type">
            Description&nbsp;
            <a ng-click="sort_by('Course_Type')">
              <i class="icon-sort"></i>
            </a>
          </th>
          <th class="cls">
            Field 3&nbsp;
            <a ng-click="sort_by('cls')">
              <i class="icon-sort"></i>
            </a>
          </th>
          <th class="SeatsAreAvailable">
            Field 4&nbsp;
            <a ng-click="sort_by('SeatsAreAvailable')">
              <i class="icon-sort"></i>
            </a>
          </th>
          <th class="StartDate">
            Field 5&nbsp;
            <a ng-click="sort_by('StartDate')">
              <i class="icon-sort"></i>
            </a>
          </th>
        </tr>
      </thead>
      <tfoot>
        <td colspan="6">
          <div class="pagination pull-right">
            <ul>
              <li ng-class="{disabled: currentPage == 0}">
                <a href ng-click="prevPage()">« Prev</a>
              </li>
              <li
                ng-click="setPage()"
                ng-class="{active: n == currentPage}"
                ng-repeat="n in range(pagedItems.length)"
              >
                <a href ng-bind="n + 1">1</a>
              </li>
              <li ng-class="{disabled: currentPage == pagedItems.length - 1}">
                <a href ng-click="nextPage()">Next »</a>
              </li>
            </ul>
          </div>
        </td>
      </tfoot>
      <tbody>
        <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
          <td>{{item.LocName}}</td>
          <td>{{item.Price}}</td>
          <td>{{item.Course_Type}}</td>
          <td>{{item.cls}}</td>
          <td>{{item.SeatsAreAvailable}}</td>
          <td>{{item.StartDate}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="http://code.angularjs.org/1.1.5/angular.js"></script>
  <script src="app.js"></script>
  <script src="controllers.js"></script>
  <script src="services.js"></script>
</body>
</html>

Still a better approach will be to use the ng-grid module.

Share:
17,146
user109187
Author by

user109187

Updated on June 04, 2022

Comments

  • user109187
    user109187 almost 2 years

    I am attempting to define my own sorting function using the documentation provided at http://docs.angularjs.org/api/ng.filter:orderBy.

    Before I explain the code written, I will also mention the behaviour that I am expecting.
    I have a table which contains a table header(th) and table data(td). When the user clicks on a column in the table (by column, I mean the th), the table data must sort based on the value in that column.

    If the user clicks the same column again, then the sorting is changed to ascending / descending if the previous sorting criteria was descending / ascending respectively.
    The user can sort using multiple columns. The first column selected is give the first priority. In case the first column value is the same, then the second column selected for sorting is used.

    Now for the code. It can be found here: http://jsfiddle.net/xkjmv/

    Problem is that the customSortFunction returns the array as expected, but the sorting does not work - when the user clicks on the column header, the sorting should be either ascending or descending (basically toggle each time it is clicked).

    I want to return an array of string predicates since I will have multiple columns to sort, but a single column sort using string predicate itself is not working

    EDIT: You can check the console to see the output that the custom sort function returns, if it is not obvious from the code.

  • Yahya KACEM
    Yahya KACEM almost 11 years
    Sorry for deleting the plunker, I updated the post with another plunker.
  • Steve Black
    Steve Black almost 11 years
    this behaves weird. sorts on the current page only and for numbers, if the items are 1, 4, 20, 40 the sort result order is 1, 20 4, 40 ??
  • Steve Black
    Steve Black almost 11 years
    still for page 3 of results, the order is not numeric but alpha when sorting on what appears to be numeric field.
  • Blazemonger
    Blazemonger over 10 years
    Please put some relevant code directly into the answer.
  • Yahya KACEM
    Yahya KACEM about 10 years
    @Blazemonger check updates answer.

Recents

Why Is PNG file with Drop Shadow in Flutter Web App Grainy?
How to troubleshoot crashes detected by Google Play Store for Flutter app
Cupertino DateTime picker interfering with scroll behaviour
Why does awk -F work for most letters, but not for the letter "t"?
Flutter change focus color and icon color but not works
How to print and connect to printer using flutter desktop via usb?
Critical issues have been reported with the following SDK versions: com.google.android.gms:play-services-safetynet:17.0.0
Flutter Dart - get localized country name from country code
navigatorState is null when using pushNamed Navigation onGenerateRoutes of GetMaterialPage
Android Sdk manager not found- Flutter doctor error
Flutter Laravel Push Notification without using any third party like(firebase,onesignal..etc)
How to change the color of ElevatedButton when entering text in TextField

Related

Angular orderBy object possible?
OrderBy Date values, which are just strings in Angular JS
dates not properly sorted in Angular.js
How to orderBy a array of objects in descending order in angularjs?
Custom order using orderBy in ng-repeat
orderBy not working as expected: Angularjs
AngularJS - ngOptions: How to order by Group Name and then by Label
Orderby not working with dict syntax on ng-repeat
How to sort object data source in ng-repeat in AngularJS?
Angularjs wrong $index after orderBy