कोणीय पृष्ठांकन अपडेट नहीं हो जब है परिदृश्य एक इनपुट पाठ बॉक्स

Question

यहाँ पर छानने के कारण सूची में परिवर्तन के लिए बाध्य:

मैं कोणीय जे एस और बूटस्ट्रैप यूआई के साथ एक ASP.NET MVC साइट का उपयोग कर रहा हूँ। मेरे पास एक इनपुट खोज बॉक्स के माध्यम से उस सूची पर फ़िल्टरिंग, AngularJS को नियंत्रक कॉल के माध्यम से खिलाए गए डेटा द्वारा पॉप्युलेट की गई गतिशील उल सूची है। सूची को अंकन (यूआई बूटस्ट्रैप नियंत्रण) के माध्यम से भी नियंत्रित किया जाता है जिसे मैंने 100 या उससे अधिक वस्तुओं की सूची के लिए प्रति पृष्ठ 10 परिणाम दिखाने के लिए सेटअप किया है। इस सूची को खोज बॉक्स में उपयोगकर्ता प्रकार के रूप में फ़िल्टर किया गया है, हालांकि मैं पेजिनेशन को भी अपडेट करना चाहता हूं, इसलिए निम्न उदाहरण पर विचार करें:

सूची में आइटम के 10 पृष्ठ (100 आइटम) हैं, उपयोगकर्ता कुछ टेक्स्ट टाइप करते हैं इनपुट सर्च बॉक्स में जो सूची को 20 या उससे कम आइटम तक फ़िल्टर करता है, इसलिए पेजिनेशन को 10 पृष्ठों से दो पृष्ठों में अपडेट किया जाना चाहिए।

मुझे लगता है कि इसे कहीं भी $ घड़ी सेटअप होना चाहिए, शायद इसे फ़िल्टर किए जाने के बाद सूची आइटम पर और फिर पेजिनेशन पेज गिनती अपडेट करें, हालांकि मैं एंगुलरजेएस के लिए काफी नया हूं, तो क्या कोई मुझे बता सकता है कि यह कैसे किया जा सकता था?

बहुत बहुत धन्यवाद। मैं नीचे मेरी कोड पोस्ट किया है: क्योंकि अपने पृष्ठांकन श्रृंखलित फिल्टर का एक संयोजन है

<div data-ng-app="dealsPage"> 
<input type="text" data-ng-model="cityName" /> 
<div data-ng-controller="DestinationController"> 
    <ul> 
     <li data-ng-repeat="deals in destinations | filter: cityName | 
      startFrom:currentPage*pageSize | limitTo:pageSize">{{deals.Location}}</li> 
    </ul> 
    <br /> 
    <pagination rotate="true" num-pages="noOfPages" current-page="currentPage" 
       max-size="maxSize" class="pagination-small" boundary-links="true"></pagination> 
</div> 

var destApp = angular.module('dealsPage', ['ui.bootstrap', 'uiSlider']); 
destApp.controller('DestinationController', function ($scope, $http) { 
    $scope.destinations = {}; 
    $scope.currentPage = 1; 
    $scope.pageSize = 10; 

    $http.get('/Deals/GetDeals').success(function (data) { 
     $scope.destinations = data; 
     $scope.noOfPages = data.length/10; 
     $scope.maxSize = 5; 
    }); 
}); 

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

Answer 1

, कोणीय पता नहीं है कि जब cityName परिवर्तन, यह currentPage 1. आप करेंगे करने के लिए पुनर्स्थापित करना चाहिए है खुद को अपने $watch से संभालने की आवश्यकता है।

तुम भी अन्यथा, आप हमेशा पेज 2.

में शुरू एक बार जब आप यह है कि जा रहा है, तो आप देखेंगे कि आपकी पृष्ठांकन सही नहीं है, क्योंकि यह मिलता है, (currentPage - 1) * pageSize कहने के लिए अपने startFrom फिल्टर समायोजित करना चाहेंगे अभी भी destination.length पर आधारित है, न कि गंतव्य के फ़िल्टर किए गए उप-सेट। उसके लिए, तुम इतनी तरह अपने नियंत्रक करने के लिए अपने दृश्य से अपना छानने तर्क बढ़ने की जरूरत करने जा रहे हैं:

http://jsfiddle.net/jNYfd/

एचटीएमएल

<div data-ng-app="dealsPage"> 
    <input type="text" data-ng-model="cityName" /> 
    <div data-ng-controller="DestinationController"> 
     <ul> 
      <li data-ng-repeat="deals in filteredDestinations | startFrom:(currentPage - 1)*pageSize | limitTo:pageSize">{{deals.Location}}</li> 
     </ul> 
     <br /> 
     <pagination rotate="true" num-pages="noOfPages" current-page="currentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination> 
    </div> 

जावास्क्रिप्ट

var destApp = angular.module('dealsPage', ['ui.bootstrap']); 

destApp.controller('DestinationController', function ($scope, $http, $filter) { 
    $scope.destinations = []; 
    $scope.filteredDestinations = []; 

    for (var i = 0; i < 1000; i += 1) { 
     $scope.destinations.push({ 
      Location: 'city ' + (i + 1) 
     }); 
    } 

    $scope.pageSize = 10; 
    $scope.maxSize = 5; 

    $scope.$watch('cityName', function (newCityName) { 
     $scope.currentPage = 1; 
     $scope.filteredDestinations = $filter('filter')($scope.destinations, $scope.cityName); 
     $scope.noOfPages = $scope.filteredDestinations.length/10; 
    }); 
}); 

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

Answer 2

संस्करण jsfiddle पर साझा किया गया है ui-bootstrap 0.5.0 के साथ संगत है लेकिन 0.6.0 से आगे तोड़ने वाले बदलाव हुए हैं।

• कोणीय 1.2.11
• कोणीय-ui-बूटस्ट्रैप 0.10.0
• 3.1 बूटस्ट्रैप:

  यहाँ एक संस्करण निम्नलिखित पुस्तकालयों का उपयोग करता है है।0

यहाँ उसी के लिए एक plunker है:

Angular UI Bootstrap Pagination

Answer 3

हैलो मैं इस कोणीय आग का उपयोग कर Firebase के साथ हुक करने की कोशिश की और यह केवल बाद मैं खोज इनपुट में कुछ लिखते हैं काम करता है। $ स्कोप में। $ घड़ी विधि, मैंने एंगुलर फायर के ऑर्डर का उपयोग किया है, ऑब्जेक्ट को एक सरणी में बदलने के लिए बायप्रोरिटीफिल्टर।

$scope.$watch('search', function(oldTerm, newTerm) { 
    $scope.page = 1; 
    // Use orderByPriorityFilter to convert Firebase Object into Array 
    $scope.filtered = filterFilter(orderByPriorityFilter($scope.contacts), $scope.search); 
    $scope.lastSearch.search = oldTerm; 
    $scope.contactsCount = $scope.filtered.length; 
}); 

प्रारंभिक भार किसी भी संपर्क को लोड नहीं करता है। इनपुट इनपुट फ़ील्ड में टाइप करना शुरू करने के बाद ही यह है।