AngularJS datalist pagination / infinity scroll on datalist?

Question

I am using a datalist that loads data from a restful API, I want to add pagination in my datalist , I am using AngularJS:

    <label>Query:</label>
    <input list="data">
</div>

<datalist id="data">
    <option ng-repeat="data in queries" value="{{data.name}}">
    </option>
</datalist>

Answer 1

You can use a external module like ngInfiniteScroll to call a function when your user is near the bottom of the page. This function should load the next load of objects from your API and add it to your queries array. It will automatically expend the list with the new content.

Answer 2

i did it using jquery -- autocomplete (by writing own directive in angular js) My directive function looks like :

myModule.directive("autoCompletequery",function(queryService){
    return {
        restrict: 'A',

        link: function(scope, element) {

            element.autocomplete({

                source: queryService.getQueries()

            });

Get Queries gets the data from factory.

<label>Query:</label>
        <input  ng-model="query" placeholder="search for query" auto-completequery/>
        Query = {{query}}