如何在AngularJS中实现数据列表自动刷新无需整页重载

方案1：定时轮询（改动最小，适合低实时性需求） #

该方案无需修改后端接口，仅调整前端逻辑即可实现需求：

第一步：调整控制器依赖注入 #

在crudController的依赖中新增AngularJS内置的$interval定时服务：

app.controller('crudController', function($scope, $http, $interval) {

第二步：添加定时刷新逻辑 #

在控制器代码起始位置添加初始化逻辑，页面加载后自动定时拉取最新列表数据：

$scope.buttonName = "Add";

// 新增代码开始
// 页面初始化先拉取一次数据
$scope.displayUsers();
// 每3秒拉取一次最新列表，间隔时间可自定义，单位为毫秒
var autoRefresh = $interval($scope.displayUsers, 3000);
// 控制器销毁时清除定时器，避免内存泄漏
$scope.$on('$destroy', function() {
  $interval.cancel(autoRefresh);
});
// 新增代码结束

$scope.displayUsers = function() {
    $http.get('select.php')
    .success(function(data) {
        $scope.students = data;
    })
}

可选优化：可以配合document.hidden判断页面是否处于激活状态，非激活状态暂停轮询，进一步降低服务器和客户端资源消耗。

第三步：修复现有HTML结构问题 #

你当前的列表行<tr>写在了<tbody>标签外，会导致渲染异常，调整为：

<table class="table table-striped">
<thead>
    <tr>
        <th><center>UNIT</center></th>
        <th><center>QUANTITY (PCS)</center></th>
        <th><center>ACTION</center></th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="student in students | filter:searchUser">
        <td>{{ student.name }}</td>
        <td>{{ student.email }}</td>
        <td>
        <button class="btn btn-info" ng-click="updateData(student.id, student.name, student.email)">Update</button>
        <button class="btn btn-danger" ng-click="deleteData(student.id)">Remove</button>
        </td>
    </tr>
</tbody>
</table>

方案2：WebSocket实时推送（适合高实时性需求） #

如果对数据刷新延迟要求很高，不想用轮询占用服务器资源，可以在后端对接WebSocket服务，前端监听后端推送的新增/修改/删除事件，收到事件后调用$scope.displayUsers()刷新列表即可，无需主动定时拉取。

内容的提问来源于stack exchange，提问作者Klint Masha