orderBy multiple fields in Angular

Question

How to sort by using multiple fields at same time in angular  fist by group and then by sub-group for Example  scope divisions      group  1  sub  1     group  2  sub  10     group  1  sub  2    group  1  sub  20    group  2  sub  1         group  2  sub  11     I wanted to display this as group   Sub-group 1 - 1 1 - 2 1 - 20 2 - 1 2 - 10 2 - 11  lt select ng-model  quot divs quot  ng-options  quot  d group   -   d sub  for d in divisions   orderBy  group    orderBy  sub  quot    gt

User · Answer

I wrote this handy piece to sort by multiple columns   properties of an object  With each successive column click  the code stores the last column clicked and adds it to a growing list of clicked column string names  placing them in an array called sortArray  The built-in Angular  orderBy  filter simply reads the sortArray list and orders the columns by the order of column names stored there  So the last clicked column name becomes the primary ordered filter  the previous one clicked the next in precedence  etc  The reverse order affects all columns order at once and toggles ascending descending for the complete array list set    lt script gt      app controller  myCtrl   function   scope             scope sortArray     name             scope sortReverse1   false           scope searchProperty1                scope addSort   function  x                if   scope sortArray indexOf x      -1                     scope sortArray splice 0 0 x    add to front                           else                    scope sortArray splice  scope sortArray indexOf x   1  x    remove                  scope sortArray splice 0  0  x    add to front again                                   scope sushi               name   Cali Roll   fish   Crab   tastiness  2              name   Philly   fish   Tuna   tastiness  2              name   Tiger   fish   Eel   tastiness  7              name   Rainbow   fish   Variety   tastiness  6              name   Salmon   fish   Misc   tastiness  2                       lt  script gt   lt table style  border  2px solid  000   gt   lt thead gt       lt tr gt           lt td gt  lt a href     ng-click  addSort  name   sortReverse1  sortReverse1  gt NAME lt span ng-show  sortReverse1  false  gt  amp  9660  lt  span gt  lt span ng-show  sortReverse1  true  gt  amp  9650  lt  span gt  lt  a gt  lt  td gt           lt td gt  lt a href     ng-click  addSort  fish   sortReverse1  sortReverse1  gt FISH lt span ng-show  sortReverse1  false  gt  amp  9660  lt  span gt  lt span ng-show  sortReverse1  true  gt  amp  9650  lt  span gt  lt  a gt  lt  td gt           lt td gt  lt a href     ng-click  addSort  tastiness   sortReverse1  sortReverse1  gt TASTINESS lt span ng-show  sortReverse1  false  gt  amp  9660  lt  span gt  lt span ng-show  sortReverse1  true  gt  amp  9650  lt  span gt  lt  a gt  lt  td gt       lt  tr gt   lt  thead gt   lt tbody gt       lt tr ng-repeat  s in sushi   orderBy sortArray sortReverse1   filter searchProperty1  gt           lt td gt    s name    lt  td gt           lt td gt    s fish    lt  td gt           lt td gt    s tastiness    lt  td gt       lt  tr gt   lt  tbody gt   lt  table gt

User · Answer

Please see this   http   jsfiddle net JSWorld Hp4W7 32    lt div ng-repeat  division in divisions   orderBy   group   sub    gt   division group  -  division sub   lt  div gt

User · Answer

lt select ng-model  divs  ng-options   d group   -   d sub  for d in divisions   orderBy   group   sub      gt    User array instead of multiple orderBY

User · Answer

Created Pipe for sorting  Accepts both string and array of strings  sorting by multiple values  Works for Angular  not AngularJS   Supports both sort for string and numbers    Pipe  name   orderBy    export class OrderBy implements PipeTransform       transform array  any    filter  any   any             if typeof filter      string                 return this sortAray array  filter            else               for  var i   filter length -1  i  gt   0  i--                    array   this sortAray array  filter i                               return array                       private sortAray array  field            return array sort  a  b    gt                if typeof a field       string                     a field      b field    a field   lt  b field    -1   1   0               else                   a field  toLowerCase       b field  toLowerCase     a field  toLowerCase    lt  b field  toLowerCase     -1   1   0

User · Answer

Sorting can be done by using  orderBy  filter in angular   Two ways     1  From view    2  From controller   From view   Syntax     array   orderBy   expression   reverse      For example     lt div ng-repeat  user in users   orderBy     name    age     true  gt   user name   lt  div gt     From controller   Syntax    filter orderBy array  expression  reverse     For example    scope filteredArray    filter orderBy  scope users    name    age    true

User · Answer

Make sure that the sorting is not to complicated for the end user  I always thought sorting on group and sub group is a little bit complicated to understand  If its a technical end user it might be OK

User · Answer

If you wants to sort on mulitple fields inside controller use this    filter  orderBy    scope property list    firstProp    secondProp       See also https   docs angularjs org api ng filter orderBy

User · Answer

There are 2 ways of doing AngularJs filters  one in the HTML using      and one in actual JS files     You can solve you problem by using       Expression   orderBy   expression   reverse     if you use it in the HTML or use something like    filter  orderBy   yourArray  yourExpression  reverse    The reverse is optional at the end  it accepts a boolean and if it s true  it will reverse the Array for you  very handy way to reverse your Array

[javascript] orderBy multiple fields in Angular

Examples related to javascript

Examples related to angularjs

Examples related to sorting

Examples related to angularjs-ng-repeat

Examples related to angularjs-orderby