Javascript 对图像使用分页

好吧，我和一个朋友正在尝试建立一个网站。它从两个目录中获取图片，并按时间顺序显示它们（图像名称是时间戳）。我们使用PHP创建一个JSON对象，代码如下：

<?php

$files = array();

$dir = opendir('./dir1');
while ($file = readdir($dir)) {
    if ($file == '.' || $file == '..') {
        continue;
    }

    $files[] = array('name'=>($file), 'tag'=>"tag1");

}

$dir = opendir('./dir2');
while ($file = readdir($dir)) {
    if ($file == '.' || $file == '..') {
        continue;
    }

    $files[] = array('name'=>($file), 'tag'=>"tag2");

}

usort($files,function($b,$a) {return strnatcasecmp($a['name'],$b['name']);});

header('Content-type: application/json');
echo json_encode($files);

?>

它由HTML处理，以创建一个页面，在网格中显示带有缩略图和图像名称的图像。不幸的是，这一切都在一个页面上，最终会有大量的图像，所以我们正在研究分页。我们在另一个线程的jfiddle上发现了这个漂亮的代码，但是在将代码集成到该线程中时遇到了困难。我们都是AngularJS的新手，因此我们不确定如何正确地将我们的程序与他们的程序结合起来。

给定：

$http.get('pictest.php').success(function(response) { 
    // this returns a promise, so you need to check the data
    $scope.pictures = response.data;
});

假设返回的JSON如下所示：

function PictureController2($scope, $http) {

    $http.get('pictest.php').success(function(data) {
        $scope.pictures = data;
    });

};

$scope.pictures= {one: "/local/myimg1.jpg", two: "/local/someOther.jpg"}; // returned from service

然后，您可以创建一个使用此$scope数据的视图

<div ng-repeat="(key, value) in pictures"> <!-- repeat a div of pictures; key from above example would be 'one' and 'two'-->
    <!-- here, ng-src uses the value from the JSON, the web address, and if it can't find that (an error), then defaults to a different address  -->
    <img height=100 width=200 ng-src="value" onerror="this.src = 'images/ImageNotAvailable.png';"/> 
</div>

您可以将ng repeat和div更改为以下内容：

<div ng-repeat="(key, value) in pictures | startFrom:currentPage*pageSize | limitTo:pageSize"">
    <img height=100 width=200 ng-src="value" onerror="this.src = 'images/ImageNotAvailable.png';"/> 
</div>

您可以发布您的视图吗？这就是你发布的提琴中实际出现的页面限制。请发布你的JSON响应和你的视图like@EliteOctagon：[{“name”：“img_2014-04-26_23-00-25.jpg”，“tag”：“tag1”}，…]是我们的JSON文件，其中tag1可以是1或2。好的，一个对象数组应该适用于我下面给出的答案。更新了我的answerDo帖子，你当前的HTML是什么样子的。好吧，我们正在尝试使用你的解决方案，我们在底部得到了一个不错的小页码，但是当我们添加“| startFrom:currentPage*pageSize | limito:pageSize”“重复一遍，图像停止显示。非常感谢到目前为止的帮助，非常感谢。哦，经过进一步的测试，我们发现startFrom:currentPage*pageSize是由于任何原因导致的问题。当我们忽略它时，我们在页面上得到10个图像，但它没有显示任何内容。

<div ng-repeat="(key, value) in pictures | startFrom:currentPage*pageSize | limitTo:pageSize"">
    <img height=100 width=200 ng-src="value" onerror="this.src = 'images/ImageNotAvailable.png';"/> 
</div>

<div ng-repeat="picture in pictures | startFrom:currentPage*pageSize | limitTo:pageSize"">
    <img height=100 width=200 ng-src="picture.name"/> 
</div>