Как сделать бесконечный прокручиваемый стол с помощью AngularJS - PullRequest
Новая
       5

Как сделать бесконечный прокручиваемый стол с помощью AngularJS

1 голос
/ 02 марта 2020

Здесь я хочу создать таблицу с бесконечной прокруткой одинаковых записей, используя Angular javascript. До сих пор я только что создал простую таблицу с полосой прокрутки, используя 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>

Ниже приведены стиль и код моего кода. 

<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 я не получаю результат.

1 Ответ

0 голосов
/ 02 марта 2020

Используйте эту директиву, это хорошо, я реализовал https://sroze.github.io/ngInfiniteScroll/

...