Reload and Randomise content on click angularjs -


i have built following simple app loads in media instagram api using angularjs. add button @ bottom when click reloads , randomises content. example length of pics 20, , 6 shown, want show random 6 of 20 each time button clicked. how go this?

machinas.com/wip/machinas/instagramfeed/

html

<section ng-controller="showimages 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">                <!-- view big photos , 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 own instagram client_id below. go https://instagram.com/developer/clients/manage/ , register app client id   var client_id = '83aaab0bddea42adb694b689ad169fb1';     //to user id go http://jelled.com/instagram/lookup-user-id , enter instagram user name 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 "+data.length)     });   });   })(); 

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, = $scope.pics.length; i; j = parseint(math.random() * i), x = $scope.pics[--i], $scope.pics[i] = $scope.pics[j], $scope.pics[j] = x); } 

references:

  1. how can shuffle array?
  2. https://css-tricks.com/snippets/javascript/shuffle-array/

Comments