单击angularjs时重新加载和随机化内容

Question

我已经构建了以下简单的应用程序，它使用 angularjs 从 instagram API 加载一些媒体。我想做的是在底部添加一个按钮，当您单击该按钮时会重新加载并随机化内容。例如，图片的长度现在是 20，并且只显示 6 个，我只想在每次单击按钮时显示 20 个中的随机 6 个。我该怎么办？

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)
    });
  });


})();

Answer 1

HTML

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

JS（在 ShowImages 控制器内）

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

或

$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);
}

参考资料：

1. https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript
2. https://css-tricks.com/snippets/javascript/shuffle-array/