简体   繁体   English

AngularJS数据列表分页/数据列表上的无限滚动?

[英]AngularJS datalist pagination / infinity scroll on datalist?

I am using a datalist that loads data from a restful API, I want to add pagination in my datalist , I am using AngularJS: 我使用的是datalist ,从一个宁静的API加载数据,我想在我的添加分页datalist ,我使用AngularJS:

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

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

You can use a external module like ngInfiniteScroll to call a function when your user is near the bottom of the page. 当用户位于页面底部附近时,可以使用ngInfiniteScroll之类的外部模块来调用函数。 This function should load the next load of objects from your API and add it to your queries array. 此函数应从API加载下一次加载的对象,并将其添加到queries数组中。 It will automatically expend the list with the new content. 它将自动使用新内容扩展列表。

i did it using jquery -- autocomplete (by writing own directive in angular js) My directive function looks like : 我使用jquery做到了-自动完成(通过在angular js中编写自己的指令)我的指令函数如下所示:

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}}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM