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



7 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

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