返されたMongoDBデータの配列をページ分割する方法

Question

MongoDBに素材データを格納し、AngularJSを使用するMEANアプリケーションを使用して、ユーザーがすべての素材をナビゲートして、探しているものを見つけることができます。私はすべての資料のコレクションを持っており、各カテゴリの値を持つフィールドを持っています（カテゴリ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> 

特定の材料ビュー：

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

クエリへ：特定の材料ビューとページネーションのための

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> 

コントローラ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 = 20 and max = min+20 ; 

： min = 0 and max = min+20は

は、2ページ目は、最大値と最小値はなります（ページごとに20件のレコードを示していると仮定） Mongoクエリは2つの新しい制約、すなわちスキップとリミットを追加します：

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