एनजी-दोहराने का उपयोग कर एक सूची पर अंकुरण

Question

मैं अपनी सूची में पृष्ठों को जोड़ने का प्रयास कर रहा हूं। मैंने एंगुलरजेएस ट्यूटोरियल का अनुसरण किया, जो स्मार्टफोन के बारे में है और मैं केवल कुछ निश्चित वस्तुओं को प्रदर्शित करने की कोशिश कर रहा हूं। यहाँ मेरी html फ़ाइल है:

  <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, आदि को प्रदर्शित करने के लिए पेजेशन जोड़ना है।

मेरे पास एक नियंत्रक है जो इसके साथ काम करता है:

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

और मेरे पास json फ़ाइलों से डेटा को पुनः प्राप्त करने के लिए एक मॉड्यूल भी है।

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

Comments

जब आप कहते हैं कि आप अगले पृष्ठ और पिछले पृष्ठ को लागू करना चाहते हैं, तो क्या आप चाहते हैं कि पृष्ठ पर शुद्धिकरण क्लाइंट पक्ष या सर्वर साइड पर हो। यदि रिकॉर्ड की संख्या बहुत अधिक है, तो आपको सर्वर साइड पेजिनेशन का विकल्प चुनना चाहिए। किसी भी परिदृश्य के तहत आपको "startIndex" को बनाए रखना शुरू करना होगा - सीमा केवल पृष्ठ पर रिकॉर्ड की संख्या प्रदान करेगी, इसके अलावा आपको कुछ की जरूरत है कि वर्तमान पृष्ठ को कैसे बनाए रखा जाए - यह startIndex को बनाए रखकर किया जा सकता है।

— रुतेश माखीजानी

मेरे पास अधिक संख्या में रिकॉर्ड नहीं हैं। मैं जो करना चाहता था, वह नियंत्रक का उपयोग करना है जो मेरे पास पहले से है (PhoneListCtrl)। मुझे नहीं पता कि यह सर्वर या क्लाइंट साइड है। माफ़ करना!

— टॉमार्टो

@RuteshMakhijani मुझे रिकॉर्ड की उच्च संख्या के साथ एक समान आवश्यकता है, कृपया अधिक संख्या में रिकॉर्ड के लिए सर्वर साइड पेजिनेशन का उपयोग करने के पीछे का कारण बताएं

— दिनेश पीआर

angulartutorial.blogspot.in/2014/03/…

— Prashobh

Answer 1

यदि आपके पास बहुत अधिक डेटा नहीं है, तो आप निश्चित रूप से ब्राउज़र में सभी डेटा को स्टोर करके और एक निश्चित समय में जो दिखाई दे रहे हैं उसे फ़िल्टर करके निश्चित रूप से पेजिंग कर सकते हैं।

यहाँ एक सरल पृष्ठांकन उदाहरण दिया गया है: http://jsfiddle.net/2ZzZB/56/

वह उदाहरण कोणीय.जेएस जीथब विकी पर पहेलियों की सूची में था, जो सहायक होना चाहिए: https://github.com/angular/angular.js/wiki/JsFiddle-Examples

संपादित करें: http://jsfiddle.net/2ZzZB/16/ को http://jsfiddle.net/2ZzZB/56/ (नहीं दिखाया जाएगा "1 / 4.5" अगर वहाँ 45 परिणाम)

Comments

आपका बहुत बहुत धन्यवाद! यह वास्तव में वही है जिसकी मुझे तलाश थी। मैंने वह उदाहरण पहले देखा था लेकिन यह काम नहीं किया। अब मैंने देखा कि थोड़ी सी वाक्य रचना त्रुटि है। "के लिए" वाक्य के बाद एक ब्रैकेट गायब है।

— टॉमर्टो

मैंने कोष्ठक जोड़ा और इसे विकि पर अद्यतन किया। लेकिन यह उनके बिना काम करना चाहिए था।

— एंड्रयू जोसलिन

ओह! कोई बात नहीं। मैं if (input?)वापसी से पहले एक शर्त जोड़ता हूं input.slice(start), धन्यवाद एंडी!

— zx1986

बार्ट की तरह, मुझे पेजिंग डेटा प्राप्त करने के लिए एक कॉलिंग फ़ंक्शन में पेजिंग जानकारी पास करने की आवश्यकता थी - यह समान है लेकिन अलग है और कुछ मामलों में मदद कर सकता है। plnkr.co/edit/RcSso3verGtXwToilJ5a

— स्टीव ब्लैक

नमस्ते, यह डेमो एक परियोजना के लिए इतना काम आया जो मुझे मिला। मुझे सभी पृष्ठ देखने या प्रत्येक पृष्ठ दिखाने के लिए पृष्ठांकन को टॉगल करने का विकल्प जोड़ने की आवश्यकता थी। इसलिए मैंने डेमो बढ़ाया। बहुत बहुत धन्यवाद। jsfiddle.net/juanmendez/m4dn2xrv

— जुआन मेंडेज़

Answer 2

मैंने बस एक JSField बनाया है जो Twitter बूटस्ट्रैप कोड के साथ बिल्ड का उपयोग करके प्रत्येक कॉलम पर पेजेशन + सर्च + ऑर्डर दिखाता है : http://jsfiddle.net/SAWsA/11/

Comments

शानदार कार्य। एक कदम और आगे बढ़ाएं और कॉलम हेडिंग को डायनामिक बनाएं अर्थात आइटम जोंस एरे से सभी अनूठे कुंजी मान प्राप्त करें और मानों को हार्ड कोडिंग के बजाय एनजी-रिपीट करने के लिए बाध्य करें। कुछ ऐसा ही मैंने यहां किया था: jsfiddle.net/gavinfoley/t39ZP

— GFoley83

कंट्रोलर में वह सब कोड होने से यह पुन: प्रयोज्य हो जाता है - telerik.com/help/silverlight/… लगता है कोणीय गायब है: QueryableDomainServiceCollectionView, VirtualQueryableCollectionView, HierarchicalDataCollectionView

— Leblanc Meneses

यह एक बहुत अच्छा समाधान है, अनुकूलन के लिए आसान है। इसका उपयोग एक जटिल परिदृश्य पर किया गया था जहां दो बाइंड किए गए तत्वों की मात्रा हजारों तक पहुंच गई थी, और यह वास्तव में पूरे कोड को फिर से भरने का विकल्प नहीं था। आपको मूल सिद्धांतों को समझाते हुए कुछ कोड के साथ उत्तर को अपडेट करना चाहिए। और शायद फिडल में AngularJS और बूटस्ट्रैप संस्करणों को अपग्रेड करें :)

— davidkonrad

Answer 3

मैंने एक मॉड्यूल बनाया है जो इन-मेमोरी पेजिनेशन को अविश्वसनीय रूप से सरल बनाता है।

यह बस की जगह पृष्ठ पर अंक लगाना करने की अनुमति देता 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?pprepreview

स्रोत: GitHub का dirPagination

Comments

JFI: अलग dirPagination.tpl.html के बजाय, हम <dir-pagination-control> <ul class = "pagination" ng-if = "1 <pages.length! AutoHide"> के अंदर पृष्ठांकन कोड भी शामिल कर सकते हैं। .. </ ul> </ dir-

— pagination

Answer 4

मुझे पता है कि यह धागा अभी पुराना है लेकिन मैं चीजों को थोड़ा अपडेट रखने के लिए इसका जवाब दे रहा हूं।

कोणीय 1.4 और इसके बाद के संस्करण के साथ आप सीधे सीमा फ़िल्टर का उपयोग कर सकते हैं जो limitपैरामीटर को स्वीकार करने के अलावा एक पैरामीटर को भी स्वीकार करता है begin।

उपयोग: {{ limitTo_expression | limitTo : limit : begin}}

तो अब आपको किसी भी तीसरे पक्ष के पुस्तकालय का उपयोग करने की आवश्यकता नहीं हो सकती है ताकि पेजिंग जैसा कुछ हासिल किया जा सके। मैंने उसी को चित्रित करने के लिए एक फील बनाया है ।

Comments

आप जिस फिडेल से जुड़े हैं, वह वास्तव में शुरुआती पैरामीटर का उपयोग नहीं करता है।

— द ब्रायन मैन

Answer 5

इस निर्देश को देखें: https://github.com/samu/angular-table

यह सॉर्टिंग और पेजिंग को बहुत अधिक स्वचालित करता है और आपको अपनी तालिका / सूची को अनुकूलित करने की पर्याप्त स्वतंत्रता देता है।

Comments

पहली नज़र में यह बिल्कुल वैसा ही लग रहा था जैसा मुझे चाहिए था, लेकिन मैं इसे w / $ संसाधन में काम करने के लिए नहीं कह सकता। ऐसा लगता है कि यह हमेशा सोचता है कि मेरी सूची यहां खाली है: github.com/ssmm/angular-table/blob/master/cfish/… ... अभी तक यह पता लगाने में सक्षम नहीं है। : /

— माइक डेसजार्डिंस

मैं पहले कॉलम में Sno कैसे दिखा सकता हूं क्योंकि मैं उपयोग नहीं कर सकता $indexहूं और मेरे सरणी में वृद्धिशील मूल्य नहीं हैं

— डेजी

मैंने ऐसा किया है: <td at-sortable at-attribute="index">{{sortedAndPaginatedList.indexOf(item) + 1}}</td>लेकिन मुझे नहीं पता कि यह सही तरीका है

— डेजी

Answer 6

यहां एक डेमो कोड है जहां AngularJS के साथ पृष्ठांकन + फ़िल्टरिंग है:

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

HTML:

<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>