如何基于AngularJS中的子结果集对结果排序

Question

Given that I have the following object:

{
    "bands": [{
        "name": "The Wibbles",
        "formed": 1992,
        "albums": [{
            "name": "A New Wibble",
            "songs": [{
                "name": "Song One",
                "time": "3:12"
            }, {
                "name": "Song Two",
                "time": "2:34"
            }, {
                "name": "Song Three",
                "time": "2:21"
            }, {
                "name": "Song Four",
                "time": "3:44"
            }, {
                "name": "Song Five",
                "time": "3:54"
            }]
        }, {
            "name": "The Wibbles Strike Back",
            "songs": [{
                "name": "Song Six",
                "time": "8:12"
            }, {
                "name": "Song Seven",
                "time": "7:34"
            }, {
                "name": "I Killed a Girl",
                "time": "8:21"
            }, {
                "name": "Monkey Fighters",
                "time": "7:44"
            }, {
                "name": "Funkallica",
                "time": "9:54"
            }]
        }]
    }]
}

Using AngularJS (and potentially underscore.js), how would I order albums by the shortest track, total album length, or by the shortest average length of the albums tracks?

If I was to then add another band, how would I order the bands themselves by these filters (shortest track / album length / average track length)?

Answer 1

Sorting number strings is kind of a pain, but we can still tackle it. Here is an example given the following html:

<div ng-repeat="band in bands">
  <h1>{{ band.name }}</h1>
  <div ng-repeat="album in band.albums">
    <h2>{{ album.name }}</h2>
    <ul>
      <li ng-repeat="songs in album.songs">
        <h3>{{ song.name }}</h3>
        <em>{{ song.time }}</em>
      </li>
  </div>
</div>

Now, to order the albums by shortest track:

<div ng-repeat="band in bands">
  <h1>{{ band.name }}</h1>
  <div ng-repeat="album in band.albums | orderBy:shortestTrackByAlbum">
    <h2>{{ album.name }}</h2>
    <ul>
      <li ng-repeat="song in album.songs">
        <h3>{{ song.name }}</h3>
        <em>{{ song.time }}</em>
      </li>
    </ul>
  </div>
</div>

As you can see, in order to perform a custom orderBy we need to pass the function (NOT the result of the function) on the current Scope that will be used to return the value that is being sorted; in this case `orderBy:shortestTrackByAlbum'.

$scope.bands = [...];
$scope.shortestTrackByAlbum = function(album) {
  var times = [];
  for (var i = 0; i < album.songs.length; i++) {
    var minutesAndSeconds = album.songs[i].split(':'),
        m = parseInt(minutesAndSeconds[0], 10),
        s = parseInt(minutesAndSeconds[1], 10);
    times.push(m * 60 + s);
  }
  return Math.min.apply(null, times);
};

Given the data you provided, I converted your times to seconds to find out the smallest number of seconds among the tracks. This smallest number is then compared with the other albums' smallest number to sort all of these smallest numbers (forgive the redundancy).

Using this pattern, you should be able to write a function for each type of situation. See this Plunker for a simple example.

In addition: if you want the user to be able to change the sorting you could implement something like the following:

<select ng-model="sortingMethod"
        ng-options="m.fn as m.name for m in methods"></select>

...
  <div ng-repeat="album in albums | orderBy:sortingMethod">
...

$scope.methods = [
  {
    name: 'Shortest Track',
    fn: $scope.shortestTrackByAlbum
  },
  {
    name: 'Total Album Length',
    fn: $scope.totalAlbumLengthByAlbum
  },
  {
    name: 'Shortest Average Length',
    fn: $scope.shortestAverageLengthByAlbum
  }
];

$scope.shortestTrackByAlbum = function(album) { ... };
$scope.totalAlbumLengthByAlbum = function(album) { ... };
$scope.shortestAverageLengthByAlbum = function(album) { ... };

Be sure and check out the docs on Angular Filters and more specifically Angular's OrderBy .