Sunday, March 30, 2014

AngularJS - Select2 Infinite Scroll with Remote Data

I really like the select2 project, I've already used the library with the different configurations. I could not find however a good sample code for using it's infinite scroll option with AngularJS, so I made my own. Here's is my AngularJS version to the select2 docs Infinite Scroll with Remote Data code sample


Using a provider

The select2 collects it's data from an external API. API calls are made from a service, Obviously, calling this service from the Directive it self is a bad idea, that's why I used a provider for this purpose. The provider is accessed by the directive and returns a Promise while performing the service call. This way I keep my code components loosely coupled.

 $scope.movieListProvider = {  
    readData: function(term, page, pageSize) {  
     var deferred = $q.defer();  
     rtService.get({  
      q: term,  
      page_limit: pageSize,  
      page: page + 1  
     })  
      .$promise.then(function(data) {  
       deferred.resolve(data);  
      }, function(reason) {  
       deferred.reject(reason);  
      });  
     return deferred.promise;  
    }  
   };  

See The full code here



10 comments:

Abhishek said...

Hi Sir,

The link for the full code is broken. Please help.

Thanks

Lior Boord said...

@Abhishek links seems to be working, please try again.

Anonymous said...

Really like your implementation. Im trying to bind using Id only. I cant get this to work. Every time I select a value, the underlying ngModel is the movie object, and not the id property of the movie. Any ideas?

Lior Boord said...

you can simply get the id from the movie object that was selected

Muhammad Bairat said...

the link for full code doesn't work

Lior Boord said...

@Muhammad, try again, it looks like Plunkr was down earlier today

Raju Kumar said...

This is my first time visit on your site and i have bookmark this for again visit. thanks a lot of for share a appreciable post ..
Angularjs Training In Hyderabad

onlinetrainings expert said...
This comment has been removed by the author.
vignesjose said...

Greatest article blogs posting!! One of the best useful blog We've noticed this particular subject information is good.Basically, we should post that our article is very nice.
Selenium Training in Chennai
Selenium Training in Velachery

murali said...

Good website! I really love how it is simple on my eyes and the data are well written


http://eonlinetraining.co/course/data-science-online-training/