Question

我有一个MEAN应用程序，用于在MongoDB中存储材料数据，并使用AngularJS，因此用户可以浏览所有材料以查找他们正在查找的内容。我有一个所有材料的集合，其中一个字段具有每个类别的值（比如类别1,2,3等）。

以下是我正在寻找的用户体验：用户点击类别，触发查询到mongo，后者将整个类别的结果返回到视图中。用户现在可以滚动浏览该类别中的所有材料。当用户点击特定材料时，查询发送到mongo，结果返回到具有更多信息的特定材料的视图中。用户现在可以对该视图中的所有材料进行分页。

问题：当用户到达特定材料视图时，他们只能通过其余材料向前分页，而不是向后分页到以前的材料。例如，在所有材质视图中，他们单击第10个材质。它们不能分页到9和11，而只能分页到11。

我知道这是因为我正在为特定材质视图创建一个全新的数组，因此单击的特定材质是新数组的索引0。我不知道如何获得我描述的用户体验。我开始认为MongoDB不是正确的数据库...有关如何获得正确分页的任何想法吗？

代码：

所有材料观点：

<div class="container">
     <div class="row">
      <div class="center">
        <h3>All materials</h3>
      </div> 
      <br>
        <div class="col m3" dir-paginate="material in graniteStuff | itemsPerPage: pageSize">
          <a ui-sref="material({id: material.material_category_id, offset: $index})"><div class="card">
            <div class="card-image small">
                <img ng-src="http://stuff.com/uploads/materials/{{material.material_id}}/300X300/thumbnail/{{material.material_photo_name}}">
            </div>
            <div class="card-content" id="color">
              <h5>{{ material.material_name }}</h5>
              <p>{{ $index }}</p> 
            </div>
            </div>
          </a>
        </div>        
      </div>
    </div>

具体材料观点：

div class="row">      
        <div class="col m12" dir-paginate="material in scrollStuff | itemsPerPage: 1">
            <div class="card">
              <div class="card-content">
                <h5 class="card-title activator grey-text text-darken-4">{{ material.material_name }}<i class="material-icons right">more_vert</i></h5>
              </div>
              <div class="card-image waves-effect waves-block waves-light">
                <img class="activator" ng-src="http://stuff.com/uploads/materials/{{material.material_id}}/1280X720/{{material.material_photo_name}}">
              </div>
              <div class="card-reveal" id="reveal">
                <span class="card-title grey-text text-darken-4"><h3>{{ material.material_name }}</h3><i class="material-icons right">close</i></span>
                <p><strong>Description: </strong>{{ material.material_description }}</p>
                <p><strong>Other Names: </strong>{{ material.material_other_names }}</p>
                <p><strong>Country of Origin ID: </strong>{{ material.material_country_of_origin }}</p>
              </div>
            </div>
        </div>        
      </div>    
    </div>

特定材料视图和分页的控制器：

.controller('ScrollCtrl', function($scope, scrollFactory, $stateParams) {
    $scope.id = $stateParams.id;
    $scope.offset = $stateParams.offset;
    scrollFactory.getScrollStuff($scope.id)
    .then(function(scrolls) {
        // loop for pointer

        var newArray = [];
        var matArray = scrolls;
        var offset = parseInt($scope.offset, 10);
        if (offset > 91) {
            offset = parseInt($scope.offset - 1, 10);
        } else {
            offset = parseInt($scope.offset, 10);
        }
        // console.log(offset);
        for(var i = 0; i < matArray.length; i++) {
            var pointer = (i + offset) % matArray.length;
            newArray.push(matArray[pointer]);
        }

        $scope.scrollStuff = newArray;
    }, function(error) {
        console.log(error);
    }); 
})

查询MongoDB：

app.get('/material/:id', (req, res) => {
    db.collection('moreInfoPhotos').find({"material_category_id": req.params.id}).toArray(function(err, results) {
        res.json(results);
    });
});

Answer 1

表单UI方面，您必须发送 min 和 max 变量。

例如，在第一页上，min和max的值将是： min = 0 and max = min+20（假设您每页显示20条记录）

第二页将最大值和最小值设为：

min = 20 and max = min+20 ;

Mongo查询将添加两个新约束，即skip和limit：

db.collection('moreInfoPhotos').find({"material_category_id": req.params.id}).skip(min).limit(max);

如何通过返回的MongoDB数据数组进行分页

1 个答案: