এনজি-পুনরাবৃত্তি ব্যবহার করে একটি তালিকায় পৃষ্ঠাগুলি


130

আমি আমার তালিকায় পৃষ্ঠাগুলি যুক্ত করার চেষ্টা করছি। আমি অ্যাঙ্গুলারজেএস টিউটোরিয়ালটি অনুসরণ করেছি, এটি স্মার্টফোনগুলির একটি এবং আমি কেবলমাত্র নির্দিষ্ট সংখ্যক অবজেক্ট প্রদর্শন করার চেষ্টা করছি। আমার এইচটিএমএল ফাইলটি এখানে:

  <div class='container-fluid'>
    <div class='row-fluid'>
        <div class='span2'>
            Search: <input ng-model='searchBar'>
            Sort by: 
            <select ng-model='orderProp'>
                <option value='name'>Alphabetical</option>
                <option value='age'>Newest</option>
            </select>
            You selected the phones to be ordered by: {{orderProp}}
        </div>

        <div class='span10'>
          <select ng-model='limit'>
            <option value='5'>Show 5 per page</option>
            <option value='10'>Show 10 per page</option>
            <option value='15'>Show 15 per page</option>
            <option value='20'>Show 20 per page</option>
          </select>
          <ul class='phones'>
            <li class='thumbnail' ng-repeat='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit'>
                <a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>
                <a href='#/phones/{{phone.id}}'>{{phone.name}}</a>
                <p>{{phone.snippet}}</p>
            </li>
          </ul>
        </div>
    </div>
  </div>

প্রদর্শিত আইটেমের সংখ্যা সীমাবদ্ধ করার জন্য আমি কয়েকটি মান সহ একটি নির্বাচন ট্যাগ যুক্ত করেছি। আমি এখন যা চাই তা হল পরের 5, 10 ইত্যাদি প্রদর্শন করার জন্য পৃষ্ঠাগুলি যুক্ত করা is

আমার একটি নিয়ামক রয়েছে যা এটির সাথে কাজ করে:

function PhoneListCtrl($scope, Phone){
    $scope.phones = Phone.query();
    $scope.orderProp = 'age';
    $scope.limit = 5;
}

এবং জেএসন ফাইলগুলি থেকে ডেটা পুনরুদ্ধার করার জন্য আমার কাছে একটি মডিউলও রয়েছে।

angular.module('phonecatServices', ['ngResource']).
    factory('Phone', function($resource){
        return $resource('phones/:phoneId.json', {}, {
            query: {method: 'GET', params:{phoneId:'phones'}, isArray:true}
        });
    });

1
যখন আপনি বলছেন যে আপনি পরবর্তী পৃষ্ঠা এবং পূর্ববর্তী পৃষ্ঠাটি প্রয়োগ করতে চান, আপনি কী চান যে পৃষ্ঠাটি সঠিকভাবে ক্লায়েন্টের পাশে বা সার্ভারের দিকে ঘটুক। রেকর্ডের সংখ্যা যদি খুব বেশি হয় তবে আপনার সার্ভার সাইড প্যাফিকেশনটি বেছে নেওয়া উচিত। যে কোনও দৃশ্যের অধীনে আপনার "স্টার্টইনডেক্স" বজায় রাখা শুরু করা দরকার - সীমাটি কেবলমাত্র পৃষ্ঠায় রেকর্ডের সংখ্যা সরবরাহ করবে, এগুলি ছাড়া বর্তমান পৃষ্ঠাগুলি কীভাবে বজায় রাখা যায় - কিছুটি স্টার্টইন্ডেক্স বজায় রেখে করা যেতে পারে done
রুতেশ মাখিজানী

আমার কাছে রেকর্ডের সংখ্যা নেই। আমি যা করতে চাই তা হ'ল আমার কাছে ইতিমধ্যে থাকা কন্ট্রোলারটি ব্যবহার করা (ফোনলিস্ট সিটিআরএল)। আমি জানি না এটি সার্ভার বা ক্লায়েন্ট সাইড কিনা। দুঃখিত!
তোমার্টো

1
@ রুতেশমখিজানী আমার উচ্চ সংখ্যার রেকর্ডের সাথে একই প্রয়োজনীয়তা রয়েছে, দয়া করে উচ্চ সংখ্যক রেকর্ডের জন্য সার্ভার সাইড পৃষ্ঠা ব্যবহারের পেছনের কারণটি ব্যাখ্যা করুন
দিনেশ পিআর ২

উত্তর:


215

আপনার যদি খুব বেশি ডেটা না থাকে তবে আপনি অবশ্যই ব্রাউজারে সমস্ত ডেটা সঞ্চয় করে এবং একটি নির্দিষ্ট সময়ে যা দৃশ্যমান তা ফিল্টার করে আপনি অবশ্যই পৃষ্ঠপোষকতা করতে পারেন।

এখানে একটি সহজ পৃষ্ঠা উদাহরণস্বরূপ: http://jsfiddle.net/2ZZZB/56/

সেই উদাহরণটি কৌণিক.জেএস গিথুব উইকিতে ফিডলগুলির তালিকায় ছিল, যা সহায়ক হওয়া উচিত: https://github.com/angular/angular.js/wiki/JsFood- উদাহরণ

সম্পাদনা: http://jsfiddle.net/2ZZZB/16/ থেকে http://jsfiddle.net/2ZzZB/56/ (45 ফলাফল থাকলে "1 / 4.5" দেখাবে না)


1
আপনাকে অনেক ধন্যবাদ! আমি ঠিক এটিই খুঁজছিলাম। আমি উদাহরণটি আগে দেখেছি কিন্তু এটি কার্যকর হয়নি। এখন আমি লক্ষ্য করেছি যে এখানে সামান্য বাক্য গঠন ত্রুটি রয়েছে। "বন্ধনী" বাক্যটির পরে একটি বন্ধনী অনুপস্থিত।
তোমার্টো

আমি বন্ধনী যুক্ত করেছি এবং এটি উইকে আপডেট করেছি। তবে এটি তাদের ছাড়া কাজ করা উচিত ছিল।
অ্যান্ড্রু জোসলিন

1
উহু! কিছু মনে করো না. আমি if (input?)ফেরার আগে একটি শর্ত যুক্ত করছি input.slice(start), অ্যান্ডি ধন্যবাদ!
zx1986

1
বার্টের মতো, প্যাজেবল ডেটা পাওয়ার জন্য আমার একটি কলিং ফাংশনে পেজিং তথ্য পাস করা দরকার - এটি একই রকম তবে ভিন্ন এবং এটি কিছু ক্ষেত্রে সহায়তা করতে পারে। plnkr.co/edit/RcSso3verGtXwToilJ5a
স্টিভ ব্ল্যাক

3
হাই, এই ডেমোটি এমন একটি প্রকল্পের জন্য কার্যকর হয়েছিল যাতে আমি জড়িত হয়েছি। আমার সমস্ত দেখতে অপশন যুক্ত করতে বা পৃষ্ঠাগুলি টগল করার পাশাপাশি প্রতিটি পৃষ্ঠা দেখানোর দরকার ছিল। সুতরাং আমি ডেমো প্রসারিত। অনেক ধন্যবাদ. jsfiddle.net/juanmendez/m4dn2xrv
হুয়ান

39

আমি মাত্র একটি জেএসফিডাল তৈরি করেছি যা টুইটার বুটস্ট্র্যাপ কোডটি বিল্ড ব্যবহার করে প্রতিটি কলামে পৃষ্ঠা + অনুসন্ধান + ক্রম দেখায় : http://jsfiddle.net/SAWsA/11/


2
চমৎকার কাজ. আরও এক ধাপ এগিয়ে নিয়ে যাওয়া এবং কলাম শিরোনামগুলি গতিশীল করার পক্ষে ভাল, আইটেমস জসন অ্যারে থেকে সমস্ত অনন্য কী মানগুলি পেয়েছেন এবং মানগুলিকে কোডিংয়ের পরিবর্তে এনজি-রিপিটে বাঁধুন। আমি এখানে যা করেছি তার মতো কিছু: jsfiddle.net/gavinfoley/t39ZP
GFoley83

- সব যে নিয়ামক কোড শুধু এটা কম পুনর্ব্যবহারযোগ্য তোলে থাকার telerik.com/help/silverlight/... QueryableDomainServiceCollectionView, VirtualQueryableCollectionView, HierarchicalDataCollectionView: কৌণিক মনে অনুপস্থিত
Leblanc Meneses

1
এটি সত্যিই দুর্দান্ত সমাধান, মানিয়ে নেওয়া সহজ easy এটি একটি জটিল দৃশ্যে ব্যবহৃত হয়েছে যেখানে দুটি বাঁধা উপাদানগুলির পরিমাণ হাজারে পৌঁছেছিল এবং পুরো কোডটি রিফ্যাক্টর করার জন্য এটি সত্যই কোনও বিকল্প ছিল না। আপনার মৌলিক নীতিগুলি ব্যাখ্যা করে কিছু কোড দিয়ে উত্তরটি আপডেট করা উচিত। এবং সম্ভবত
এফুলারে অ্যাঙ্গুলারজেএস

15

আমি একটি মডিউল তৈরি করেছি যা মেমোরির পৃষ্ঠাতে অবিশ্বাস্যভাবে সহজ করে তোলে।

এটা শুধু প্রতিস্থাপন পৃষ্ঠা নম্বর দেওয়া আপনি করতে পারবেন ng-repeatসঙ্গে dir-paginate, একটি পাইপ ফিল্টার হিসাবে প্রতি পাতায় আইটেম উল্লেখ করুন, এবং তারপর যেখানেই থাকুন না কেন আপনি একটি একক নির্দেশ আকারে মত নিয়ন্ত্রণ ড্রপ<dir-pagination-controls>

তোমারটো জিজ্ঞাসিত মূল উদাহরণটি দেখতে, এটি দেখতে এরকম হবে:

<ul class='phones'>
    <li class='thumbnail' dir-paginate='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit | itemsPerPage: limit'>
            <a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>
            <a href='#/phones/{{phone.id}}'>{{phone.name}}</a>
            <p>{{phone.snippet}}</p>
    </li>
</ul>

<dir-pagination-controls></dir-pagination-controls>

আপনার নিয়ামকটিতে কোনও বিশেষ পৃষ্ঠাগুলি কোডের প্রয়োজন নেই। এটি সমস্ত মডিউল দ্বারা অভ্যন্তরীণভাবে পরিচালিত।

ডেমো: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p= পূর্বরূপ

সূত্র: গিটহাবের ডিরপেজেশন


জেএফআই: পৃথক dirPagination.tpl.html এর পরিবর্তে, আমরা <dir-pagination-controls> <ul শ্রেণি = "পৃষ্ঠাগুলি" এনজি-ইফ = "1 <পৃষ্ঠাগুলি"! অটোহাইড "> এর ভিতরে পৃষ্ঠা পৃষ্ঠাটি অন্তর্ভুক্ত করতে পারি। .. </ul> </dir-
pagination

5

আমি জানি এই থ্রেডটি এখন পুরানো তবে জিনিসগুলি কিছুটা আপডেট রাখতে আমি এর উত্তর দিচ্ছি।

কৌণিক 1.4 এবং উপরে আপনি সরাসরি সীমাবদ্ধতা ফিল্টার ব্যবহার করতে পারেন যা limitপরামিতি গ্রহণ করা ছাড়াও কোনও পরামিতি গ্রহণ করে begin

ব্যবহার: {{ limitTo_expression | limitTo : limit : begin}}

সুতরাং এখন পৃষ্ঠাগুলির মতো কিছু অর্জনের জন্য আপনার কোনও তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করার প্রয়োজন নেই। আমি এটি চিত্রিত করার জন্য একটি ফিডল তৈরি করেছি ।


আপনি যে ফ্রিডলটি লিঙ্ক করেছেন সেটি আসলে সূচনা প্যারামিটার ব্যবহার করে না।
দুরত্বপূর্ণ ম্যান 20'17

3

এই নির্দেশনাটি দেখুন: https://github.com/samu/angular-table

এটি বাছাই এবং পৃষ্ঠাগুলি প্রচুর পরিমাণে স্বয়ংক্রিয় করে এবং আপনি চান তবে আপনার টেবিল / তালিকাটি কাস্টমাইজ করার যথেষ্ট স্বাধীনতা দেয়।


প্রথম নজরে এটি আমার প্রয়োজনের মতো দেখতে লাগল তবে আমি ডাব্লু / $ রিসোর্সটিতে কাজ করতে পারি বলে মনে হয় না। দেখে মনে হচ্ছে এটি সর্বদা আমার তালিকাটি এখানে খালি রয়েছে: github.com/ssmm/angular-table/blob/master/coffee/… ... কেন তা এখনও বুঝতে পারেনি। : /
মাইক দেশজার্ডিনস

আমি প্রথম কলামে Sno কে কীভাবে দেখাব যেহেতু আমি ব্যবহার করতে পারি না $indexএবং আমার অ্যারেতে বর্ধিত মান থাকে না
দ্বিঘ

আমি এটি করেছি: <td at-sortable at-attribute="index">{{sortedAndPaginatedList.indexOf(item) + 1}}</td>তবে আমি জানি না যে এটি সঠিক উপায়
কিনা

2

এখানে একটি ডেমো কোড রয়েছে যেখানে অ্যাঙ্গুলারজেএস-এর সাথে প্যাফিকেশন + ফিল্টারিং রয়েছে:

https://codepen.io/lamjaguar/pen/yOrVym

জেএস:

var app=angular.module('myApp', []);

// alternate - https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
// alternate - http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/paginating-through-client-side-data.html

app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.q = '';

    $scope.getData = function () {
      // needed for the pagination calc
      // https://docs.angularjs.org/api/ng/filter/filter
      return $filter('filter')($scope.data, $scope.q)
     /* 
       // manual filter
       // if u used this, remove the filter from html, remove above line and replace data with getData()

        var arr = [];
        if($scope.q == '') {
            arr = $scope.data;
        } else {
            for(var ea in $scope.data) {
                if($scope.data[ea].indexOf($scope.q) > -1) {
                    arr.push( $scope.data[ea] );
                }
            }
        }
        return arr;
       */
    }

    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);                
    }

    for (var i=0; i<65; i++) {
        $scope.data.push("Item "+i);
    }
  // A watch to bring us back to the 
  // first pagination after each 
  // filtering
$scope.$watch('q', function(newValue,oldValue){             if(oldValue!=newValue){
      $scope.currentPage = 0;
  }
},true);
}]);

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

এইচটিএমএল:

<div ng-app="myApp" ng-controller="MyCtrl">
  <input ng-model="q" id="search" class="form-control" placeholder="Filter text">
  <select ng-model="pageSize" id="pageSize" class="form-control">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
     </select>
  <ul>
    <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
      {{item}}
    </li>
  </ul>
  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button> {{currentPage+1}}/{{numberOfPages()}}
  <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next
    </button>
</div>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.