Reload and Randomise content on click angularjs

Question

I have built the following simple app which loads in some media from the instagram API using angularjs. What I would like to do is add a button at the bottom which when you click reloads and randomises the content. Say for example the length of pics is now 20, and only 6 are shown, I just want to show a random 6 of the 20 each time the button is clicked. How would I go about this?

machinas.com/wip/machinas/instagramfeed/

HTML

<section ng-controller="ShowImages as images" class="page" ng-hide="pics.length < 6">
     <div  class="container" data-ng-class="{ 'loaded': pics.length > 0 }">
         <div ng-show="layout == 'grid'" class="row">
               <!-- A view with big photos and no text -->
  <div ng-repeat="p in pics | limitTo: 6" class="column large-4 overlay-col">
      <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.standard_resolution.url}}" /></a>
       <div class="overlay-hover">
         <div class="overlay-content">
             <a href="{{p.comments.data|getFirstCommentFrom:'alx_lloyd'}}" class="cta-1">Discover now</a>
  </div>                                                
</div>
</div>
</div>

..

JS

(function(){
    //Place your own Instagram client_id below. Go to https://instagram.com/developer/clients/manage/ and register your app to get a client ID
  var client_id = '83aaab0bddea42adb694b689ad169fb1';
    //To get your user ID go to http://jelled.com/instagram/lookup-user-id and enter your Instagram user name to get your user ID
  var user_id = '179735937';

  var app = angular.module('instafeed', ['ngAnimate']);
    app.filter('getFirstCommentFrom',function(){
  return function(arr, user){
    for(var i=0;i<arr.length;i++)
    {
      if(arr[i].from.username==user)
        return arr[i].text;
    }
    return '';
  }
})

  app.factory("InstagramAPI", ['$http', function($http) {
    return {
      fetchPhotos: function(callback){
        var endpoint = "https://api.instagram.com/v1/users/self/media/liked/";
        endpoint += "?access_token=179735937.83aaab0.e44fe9abccb5415290bfc0765edd45ad";
        endpoint += "&callback=JSON_CALLBACK";
        /*   var endpoint = "https://api.instagram.com/v1/users/" + user_id + "/media/recent/?";
        endpoint += "?count=99";
        endpoint += "&client_id=" + client_id;
        endpoint += "&callback=JSON_CALLBACK";
*/
        $http.jsonp(endpoint).success(function(response){
          callback(response.data);

        });
      }
    }
  }]);

  app.controller('ShowImages', function($scope, InstagramAPI){
    $scope.layout = 'grid';
    $scope.data = {};
    $scope.pics = [];



    InstagramAPI.fetchPhotos(function(data){
      $scope.pics = data;
      console.log("length is "+data.length)
    });
  });


})();

score 0 · Answer 1 · edited Jun 02 '21 at 05:48

HTML

<button ng-click="shuffle()">
  Shuffle
</button>

JS (inside ShowImages controller)

$scope.shuffle = function() {
  $scope.pics.sort(function() { return 0.5 - Math.random() });
}

or

$scope.shuffle = function() {
  for(var j, x, i = $scope.pics.length; i; j = parseInt(Math.random() * i), x = $scope.pics[--i], $scope.pics[i] = $scope.pics[j], $scope.pics[j] = x);
}

References:

Reload and Randomise content on click angularjs

1 Answers1