来自外部json的angularjs无限滚动答案

【问题标题】：angularjs infinite scroll from external json来自外部json的angularjs无限滚动
【发布时间】：2015-09-26 01:52:49
【问题描述】：

如何实现无限滚动，因为 json 数据是大文件。从外部站点上生成的 JSON 文件创建 angularjs 中的无限滚动时，我遇到了一些麻烦。如何让无限滚动相对于内部内容 div 滚动条起作用？下面是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />

<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="table.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
$(window).resize(function() {
  if ($(window).width() < 960) {
window.location = "http://www.stackoverflow.com";
  }
 else {
    window.location = "http://www.google.com";
 }
});
</script>

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

</head>

<body class="body" ng-app="myApp" ng-controller="customersCtrl">

<header class="mainHeader">

    <nav>
        <ul>
            <li class="active"><a href="#">Sokranti Data Analytics</a></li>         
        </ul>
    </nav>
</header>

<div class="mainContent">
    <div class="content">   
        <article class="topcontent">                    

            <content>

                <div class="mytable">
                    <table >
                        <tr> 
                            <td>eng_rev_type</td>
                            <td>year_start</td>
                            <td>year_end</td>
                            <td>type</td>                                       
                            <td>amount</td>
                        </tr>

                        <tr ng-repeat="x in names | filter:test">
                            <td>{{ x.eng_rev_type }}</td>
                            <td>{{ x.year_start }}</td>
                            <td>{{ x.year_end }}</td>
                            <td>{{ x.type }}</td>
                            <td>{{ x.amount }}</td>                 
                        </tr>

                    </table>
                </div>

            </content>

        </article>

    </div>

            <aside class="top-sidebar">
                <article>
                    <h2>Filter</h2>
                    <p><input type="text" ng-model="test"></p>
                </article>
            </aside>

</div>

<footer class="mainFooter">
    <p>Copyright &copy; 2015 <a href=""></a></p>
</footer>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("data.json")
  .success(function (response) {$scope.names = response.data;});

});

</script>



</body>
</html>

【问题讨论】：

查看角度材料虚拟重复：material.angularjs.org/latest/#/api/…

标签： json angularjs

【解决方案1】：

您可以创建一个绑定到滚动事件的指令。然后你可以增加滚动高度的大小。

【讨论】：