Question

好吧，我和朋友正在努力建立一个网站。它从两个目录中获取图片，并按时间顺序显示它们（图像名称是时间戳）。我们使用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);

?>

我们有一个javascript文件，如下所示：

function PictureController2($scope, $http) {

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

};

它由HTML处理以创建一个页面，该页面显示带有缩略图和图像名称的图像。不幸的是，它只在一页上，最终会有大量的图像，所以我们正在考虑分页。我们从另一个线程http://jsfiddle.net/2ZzZB/56/在jfiddle上找到了这个漂亮的代码，但是在将代码集成到那个代码中时遇到了麻烦。我们都是AngularJS的新手，所以我们不确定如何正确地将我们的计划与他们的计划结合起来。

Answer 1

下式给出：

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

让我们说你的JSON返回是这样的：

$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-show，ng-hide，ng-if和过滤器来限制显示的内容，或者使用你提供的链接中的过滤器：

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

您可以将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>

其中$ scope.currentPage和$ scope.pageSize在控制器中定义为整数

更新

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

使用图像分页

1 个答案: