Question

在这里，我想使用Angular javascript制作一个具有无限滚动Same条目的表格。到目前为止，我只是使用Angular javascript制作了一个带有滚动条的简单表。

该表的条目如下。

var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){

var users = [
    {
        "CategoryName": "Beverages",
        "Name":"Beverages",
        "ProductName": "Steeleye Stout"
    },
    {
        "CategoryName": "Beverages",
        "Name":"Beverages",
        "ProductName": "Laughing Lumberjack Lager"
    },
    {
        "CategoryName": "Beverages",
        "Name":"",
        "ProductName": "Lakkalik\u00f6\u00f6ri"
    },
    {
        "CategoryName": "Beverages",
        "Name":"Thumpsup",
        "ProductName": "Guaran\u00e1 Fant\u00e1stica"
    },
    {
        "CategoryName": "Beverages",
        "Name":"Fanta",
        "ProductName": "Ipoh Coffee"
    },
    {
        "CategoryName": "Beverages",
        "Name":"Limca",
        "ProductName": "Chang"
    },
    {
        "CategoryName": "Beverages",
        "Name":"Mountain Dew",
        "ProductName": "Chartreuse verte"
    },
    {
        "CategoryName": "Beverages",
        "Name":"Mrinda",
        "ProductName": "Ipoh Coffee"
    },
    {
        "CategoryName": "Beverages",
        "Name":"Pepsi",
        "ProductName": "Chai"
    },
    {
        "CategoryName": "Beverages",
        "Name":"Coca Cola",
        "ProductName": "Chang"

    }
];
$scope.users = users;});

这是桌子的身体。

<body ng-app="myApp" ng-controller="myCtrl">

<table border="3px;">
<tr>
<td>CategoryName</td>
<td>Name</td>
<td>ProductName</td>
</tr>
<tr ng-repeat="user in users">
<td>{{user.CategoryName}}</td>
<td>{{user.Name}}</td>
<td>{{user.ProductName}}</td>
</tr>
</table>
</body>

我的代码的样式和Cdn在下面。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<style>
table thead {
 display: block;
}
table tbody {
height: 200px;
display: block;
overflow-y: scroll;
}
</style>

我尝试了许多其他方法来制作无限滚动条，但我没有得到想要的东西。我使用Jquery https://codepen.io/amar1203/pen/ZEGyRzP获得了所需的输出，但是使用angular我没有得到结果。

Answer 1

使用这个指令很好，我已经实现了 https://sroze.github.io/ngInfiniteScroll/

如何使用AngularJS制作无限滚动表

1 个答案: