Question

请帮忙。第三天，我无法应付这项任务。我有一个脚本，以砖石的形式显示图像。

angular.module('demoApp', ['angularGrid', 'ui.bootstrap'])
.service('imageService',['$q','$http',function($q,$http){
    this.loadImages = function(){
        return $http.jsonp("https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK");
    };
}])
.controller('demo', ['$scope','imageService', 'angularGridInstance', function ($scope,imageService,angularGridInstance) {
   imageService.loadImages().then(function(data){
        data.data.items.forEach(function(obj){
            var desc = obj.description,
                width = desc.match(/width="(.*?)"/)[1],
                height = desc.match(/height="(.*?)"/)[1];

            obj.actualHeight  = height;
            obj.actualWidth = width;
        });
       $scope.pics = data.data.items;

       console.log($scope.pics.length);

    });

    $scope.$watch('pics', function(){
        $scope.man = {
            currentPage: 1,
            filteredPics: [],
            itemsPerPage: 10
        };



        $scope.figureOutTodosToDisplay = function () {
            var begin = (($scope.man.currentPage - 1) * $scope.man.itemsPerPage);
            var end = begin + $scope.man.itemsPerPage;

            var pics = [];

            for(var one in $scope.pics) {
                pics.push($scope.pics[one]);
            }    


            $scope.man.filteredPics = pics.slice(begin, end);

            console.log($scope.man.currentPage);
        };

        $scope.figureOutTodosToDisplay();

        $scope.pageChanged = function () {
            $scope.figureOutTodosToDisplay();
        };            
    });

}]);

html文件中的

具有分页功能。加载后，图像仅显示第一页。当我点击一个按钮时，没有显示任何分页。 `

    <ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="true" >
        <li data-ng-repeat="pic in man.filteredPics" class="grid" data-ng-clock>
            <img src="{{pic.media.m}}" class="grid-img" data-actual-width = "{{pic.actualWidth}}"  data-actual-height="{{pic.actualHeight}}" />
        </li>
    </ul>    

    <pagination
        direction-links="false"
        max-size="3"
        items-per-page="man.itemsPerPage"
        total-items="pics.length"
        ng-model="man.currentPage"
        ng-change="pageChanged()">
    </pagination>
</div>

Angulargrid module Angular 1.4.8 Bootstrapjs

请帮帮我，希望你的体验。非常感谢你

角砌体分页不起作用

0 个答案: