Custom sort function in ng-repeat

by

Actually the orderBy filter can take as a parameter not only a string but also a function. From the orderBy documentation: https://docs.angularjs.org/api/ng/filter/orderBy):

function: Getter function. The result of this function will be sorted
using the <, =, > operator.

So, you could write your own function. For example, if you would like to compare cards based on a sum of opt1 and opt2 (I’m making this up, the point is that you can have any arbitrary function) you would write in your controller:

$scope.myValueFunction = function(card) {
   return card.values.opt1 + card.values.opt2;
};

and then, in your template:

ng-repeat="card in cards | orderBy:myValueFunction"

Here is the working jsFiddle

The other thing worth noting is that orderBy is just one example of AngularJS filters so if you need a very specific ordering behaviour you could write your own filter (although orderBy should be enough for most uses cases).

More Related Contents:

  1. Angular ng-repeat Error “Duplicates in a repeater are not allowed.”
  2. ng-repeat :filter by single field
  3. Angular ng-repeat add bootstrap row every 3 or 4 cols
  4. Adding parameter to ng-click function inside ng-repeat doesn’t seem to work
  5. AngularJS – How to structure a custom filter with ng-repeat to return items conditionally
  6. Angular ng-repeat conditional wrap items in element (group items in ng-repeat)
  7. AngularJS : Custom filters and ng-repeat
  8. Is this a “Deferred Antipattern”?
  9. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  10. Angular HttpPromise: difference between `success`/`error` methods and `then`’s arguments
  11. How to format date in angularjs
  12. Wait for all promises to resolve
  13. Angular: calling controller function inside a directive link function using &
  14. Limit the length of a string with AngularJS
  15. inline conditionals in angular.js
  16. Angular, content type is not being sent with $http
  17. angular directive encapsulating a delay for ng-change
  18. Angular: ng-bind-html filters out ng-click?
  19. How can I test an AngularJS service from the console?
  20. AngularJS leaves comments in HTML: is it possible to remove them?
  21. Usage of $broadcast(), $emit() And $on() in AngularJS
  22. Injecting $state (ui-router) into $http interceptor causes circular dependency
  23. How to handle $resource service errors in AngularJS
  24. AngularJS: ngInclude vs directive
  25. How to create a AngularJS promise from a callback-based API
  26. What is ng-transclude?
  27. How to share data between two modules in AngularJS?
  28. AngularJS ng-model-options getter-setter
  29. Angular reload current route and reload the current template
  30. Angular and mixing jQuery UI – Why not?

Leave a Comment