$ http अनुरोध

के साथ सामग्री कोणीय अनंत स्क्रॉल मैं Angular Material का उपयोग अनंत स्क्रॉल करने के लिए कर रहा हूं, और मुझे $ http अनुरोध के साथ demo $ टाइमआउट फ़ंक्शन को प्रतिस्थापित करने की आवश्यकता है। लेकिन मैं सही समाधान नहीं कर सकता। नीचे दिए गए कोड में, अनंत स्क्रॉल ठीक काम करता है लेकिन http अनुरोध से डेटा नहीं दिखाता है। समस्या यह है कि मुझे $ http परिणाम को infiniteItems पर बाध्य करने का तरीका नहीं पता है।

Here प्लंकर है।

Index.html

<body ng-app="infiniteScrolling" class="virtualRepeatdemoInfiniteScroll"> 
<div ng-controller="AppCtrl as ctrl" ng-cloak> 
    <md-content layout="column"> 
     <md-virtual-repeat-container id="vertical-container" flex> 
      <div md-virtual-repeat="item in ctrl.infiniteItems" md-on-demand 
       class="repeated-item" flex> 
       {{item.id}} 
      </div> 
     </md-virtual-repeat-container> 
    </md-content> 
</div> 
</body>

जे एस:

(function() { 
'use strict'; 
angular 
    .module('infiniteScrolling', ['ngMaterial']) 
    .controller('AppCtrl', function ($timeout,$scope,$http) { 
    this.infiniteItems = { 
      numLoaded_: 0, 
      toLoad_: 0, 
      items:[], 
      getItemAtIndex: function (index) { 
       if (index > this.numLoaded_) { 
        this.fetchMoreItems_(index); 
        return null; 
       } 
       return index; 
      }, 
      getLength: function() { 
       return this.numLoaded_ + 5; 
      }, 
      fetchMoreItems_: function (index) { 
       if (this.toLoad_ < index) { 
        this.toLoad_ += 20; 

        $http.get('items.json').success(function (data) { 
         var items = data; 
         for (var i = 0; i < items.length; i++) { 
          this.items.push(items[i].data); 
         } 
         this.numLoaded_ = this.toLoad_; 
        }.bind(this)); 
       } 
      } 
     }; 
    }); 
})();

स्रोत

2015-11-17 Asieh Mokarian

यह एक काम करता है:

plnkr

getItemAtIndex सूचकांक और नहीं आइटम लौटे
अगर आप का निरीक्षण किया है कि तुम क्या धक्का दे दिया, तुम मेरे plunkr में 33 लाइन पर है कि देखना चाहते हैं मैं obj.data, सादे नहीं concat obj

(function() { 
    'use strict'; 
    angular.module('infiniteScrolling', ['ngMaterial']) 
     .controller('AppCtrl', function ($scope, $http) { 
      // In this example, we set up our model using a plain object. 
      // Using a class works too. All that matters is that we implement 
      // getItemAtIndex and getLength. 
      var vm = this; 
      vm.infiniteItems = { 
       numLoaded_: 0, 
       toLoad_: 0, 
       items: [], 

       // Required. 
       getItemAtIndex: function (index) { 
        if (index > this.numLoaded_) { 
         this.fetchMoreItems_(index); 
         return null; 
        } 
        return this.items[index]; 
       }, 

       // Required. 
       getLength: function() { 
        return this.numLoaded_ + 5; 
       }, 

       fetchMoreItems_: function (index) { 
        if (this.toLoad_ < index) { 
         this.toLoad_ += 5; 
         $http.get('items.json').then(angular.bind(this, function (obj) { 
          this.items = this.items.concat(obj.data); 
          this.numLoaded_ = this.toLoad_; 
         })); 
        } 
       } 
      } 
     }) 
})();

स्रोत

2015-11-17 16:26:40

धन्यवाद, यह काम करता है। लेकिन मुझे नहीं पता कि क्यों लोड करने के लिए _ + = 20, जब मैं स्क्रॉल डाउन करता हूं तो डेटा बड़ी देरी के साथ लोड होता है, बहुत कम लोड करने के लिए कभी भी लोड नहीं होता _ _ = 10। –

वैसे, वास्तव में यह डीओएम में तत्व बनाता है लेकिन चूंकि आपका एपीआई 5 तत्व देता है, आईआईआरसी, इसमें प्रारंभ करने के लिए पर्याप्त डेटा नहीं है, इसलिए वे रिक्त/खाली हैं। –

धन्यवाद, आप सही हैं। मैं सिर्फ एक और बिंदु जोड़ना चाहता हूं: मुझे लगता है कि 'obj.data' के साथ 'डेटा' को प्रतिस्थापित करना समाधान का हिस्सा नहीं है क्योंकि मैं' '' के बजाय' सफलता 'का उपयोग कर रहा था और यह डेटा नतीजे देता है, लेकिन' concat समाधान का हिस्सा है। क्योंकि जब मैं हटा देता हूं कि कोड सही तरीके से काम नहीं करता है। यह नकारात्मक है क्योंकि यह स्मृति में केवल डेटा को देखने में सभी डेटा (सभी डेटा देखने के बाहर) को स्टोर करता है। –

पर प्रत्येक एपीआई कॉल करने के लिए प्रयास करें डीबी के पास कुछ और रिकॉर्ड हैं या नहीं। और fetchMoreItems_ फ़ंक्शन में उस स्थिति को जोड़ें।

fetchMoreItems_: function (index) { 
       if (this.toLoad_ < index && hasMoreRecords) { 
        this.toLoad_ += 5;

हमारे कोड में हम जैसे जानकारी प्राप्त

sCurrentPage: 3
sMore: सच == >> यह इंगित करता है कि डाटाबेस अधिक रिकॉर्ड या है नहीं प्राप्त कर रहा है पेज बुद्धिमान डेटा के बाद ।
sTotalPages: 4
sTotalRecords: 36

स्रोत

2016-06-03 20:14:51

और आपकी कहानियां यह डीओएम में तत्व बनाती है और यदि हमें कम रिकॉर्ड मिलते हैं जो रिक्त रिकॉर्ड दिखाते हैं। तो मैं उन खाली रिकॉर्ड्स को कैसे हटा सकता हूं या रोक सकता हूं। क्या आप कृपया मदद कर सकते हैं ... –

यहाँ आया और @ Alessandro-buggin जवाब जो काफी मददगार था देखा। मुझे इसे थोड़ा बदलना पड़ा, इसलिए मैंने दूसरों को मदद करने के लिए इसे साझा करने के बारे में सोचा। मैं की जरूरत:

(this.stop_ का प्रयोग करके), सामग्री लोड करने के दौरान छुपा
पुस्तक अनुरोध मिल जबकि पहले से ही
रोक अनुरोध जब पूरे डेटा बैकएंड से प्राप्त किया गया था (this.hold का प्रयोग करके) डाटा को पुनः से बचने के लिए करने के लिए ग्लिच या खाली तत्वों से बचें (फिर से this.hold का उपयोग कर)। इस दृश्य पर आपको उस तत्व पर ng-hide का उपयोग करने की आवश्यकता है क्योंकि ng-if तत्व को अस्तित्व में रखने से बचें ताकि यह पहली बार लोड न हो।
पैरामीटर/फ़िल्टर बाहरी रूप से बदलते समय डेटा को फिर से लोड करने के लिए रीफ्रेश विधि को कार्यान्वित करना।

बिल्कुल सही से लेकिन बहुत अच्छी तरह से काम करता है।

vm.elements = null; 
vm.infiniteItems = { // Start of infinte logic 

stop_: false, 
hold: false, 
numLoaded_: 0, 
toLoad_: 0, 
items: [], 

refresh: function() { 
    this.stop_ = false; 
    this.hold = false; 
    this.numLoaded_ = 0; 
    this.toLoad_ = 0; 
    this.items = []; 
}, 

getItemAtIndex: function (index) { 
    if (!this.hold) { 
     if (index > this.numLoaded_) { 
      this.fetchMoreItems_(index); 
      return null; 
     } 
    } 
    return this.items[index]; 
}, 

getLength: function() { 
    if (this.stop_) { 
     return this.items.length; 
    } 
    return this.numLoaded_ + 5; 
}, 

fetchMoreItems_: function (index) { 
    if (this.toLoad_ < index) { 

     this.hold = true; 
     this.toLoad_ += 5; 

     var start = this.numLoaded_; 
     if (start > 0) start++; 

     MyService.getData(parameters) 
     .then(angular.bind(this, function (obj) { 

      if (obj && obj.elements > 0) { 
      vm.elements = obj.elements; 
      this.items = this.items.concat(obj.data); 

      if (obj.elements < this.toLoad_) { 
       this.stop_ = true; 
      } 
      this.numLoaded_ = this.items.length; 
      this.hold = false; 

      } else { // if no data 
      vm.elements = 0; 
      } 
     })); 
    } 
} 

} // End of infinte logic

नोट: मेरी सेवा इस तरह से बना एक वस्तु देता है: obj = {elements: INTEGER, data: ARRAY} जहां तत्वों आप पूर्ण क्वेरी की लंबाई बताता है।

स्रोत

2017-01-27 07:17:04 paulie

$ http अनुरोध

उत्तर

संबंधित मुद्दे