Instagram API with Angular OrderBy Filter


April 21, 2015

Last time I was trying to wrap my head around ngResource to pull in Instagram API as an Angular service. I wanted to have a way to sort my data by likes or new to old and vice versa. The Angular site has a good example of this in their tutorial showing two-way data binding. I thought I'd give it a shot.

My template got a new select element with a ng-model="orderProp" attribute.

<p>Sort by:
 <select ng-model="orderProp">
   <option value="created_time">Oldest to Newest</option>
   <option value="-created_time">Newest to Oldest</option>
   <option value="-likes.count">Most Likes</option>
   <option value="likes.count">least Likes</option>
 </select>
 </p>

In my controller I added a new $scope variable:

$scope.orderProp = '-created_time';

Here's my entire InstagramCtrl function:

instagramControllers.controller('InstagramCtrl', ['$scope', 'Photo', function InstagramCtrl  ($scope, Photo) {
  $scope.photos = Photo.query();
  $scope.orderProp = '-created_time';
  console.log($scope.photos);
}]);

So for my template I added the orderBy filter:

<li ng-repeat="photo in photos.data | orderBy:orderProp">

And here's my entire Angular template to display all photos returned:

<ul>
   <li ng-repeat="photo in photos.data | orderBy:orderProp">
     <a href="#/photos/{{ photo.id }}" data-url="{{ photo.link }}" data-id="{{ photo.id }}" data-created-time="{{ photo.created_time | date : format : timezone}}" data-likes="{{ photo.likes.count }}">
         <img ng-src="{{ photo.images.low_resolution.url }}">
     </a>
  </li>
</ul>

See the Pen Instagram API with Angular by Jason Weaver (@indyplanets) on CodePen.

Latest Thoughts

Thanks for stopping by!