Question

使用angualar js将数据从数据库加载到html中的表。我也使用间隔，以使表每10秒重新加载一次，以获得刚被其他用户输入的新数据。

问题： 每次重新加载时，表都会闪烁。使页面看起来很有趣，因为它有一个小故障。

在寻找什么： 有没有办法可以让新数据从表格的顶部滑入并成为第一，而其余部分在其下方重新调整并成为第二，三等等。我被认为是Angular Js是我选择它而不是使用我常用的AJAX的神奇原因

角色代码

 var supDetails = angular.module("supDetails", ['datatables']);

     supDetails.controller('supportController', function($scope, $http, $interval) {
          $scope.names = [];
$scope.isFirst = true;
$scope.loadData = function() {    
    var httpRequest = $http({
        method: 'GET',
        url: 'anfil.php?ins=sup'

    }).success(function(data, status) {
    console.log('loading..');
        $scope.names = data;

       if(!$scope.isFirst){
          angular.forEach(data,function(key,val){
            $scope.names[key] = data[key];
          });
        }            
        $scope.isFirst = false;
    });

};

         $scope.loadData();

// Function to replicate setInterval using $timeout service.

   $interval(function () {
         $scope.loadData();
}, 10000);

    });

我的HTML

 <!-- /.col -->
    <div class="col-md-9" ng-app = "supDetails" ng-controller="supportController">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">Messages</h3>
          <!-- /.box-tools -->
           <div class="box-tools pull-right">
            <div class="has-feedback">
             <button type="button" ng-click="loadData()" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>
            </div>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body no-padding">

          <div class="mailbox-messages">
            <table datatable="ng" class="table table-hover table-striped">
             <thead>
            <tr>
              <th>Stat</th>
              <th>Name</th>
              <th>Problem</th>
              <th>Time</th>
            </tr>
            </thead>
              <tbody>
              <tr ng-repeat="x in names">
                <td class="mailbox-star"><a href="#"><i class="fa fa-circle text-blue"></i></a></td>
                <td class="mailbox-name"><a href="read-mail.html">{{x.user_id}}</a></td>
                <td class="mailbox-subject"><b>{{x.ticket_title}}</b> - {{x.subject}}
                </td>
                <td class="mailbox-date">{{x.ticket_open_date}}</td>
              </tr>

              </tbody>
              <tfoot>
                 <tr>
              <th>Stat</th>
              <th>Name</th>
              <th>Problem</th>
              <th>Time</th>
            </tr>
              </tfoot>
            </table>
            <!-- /.table -->
          </div>
          <!-- /.mail-box-messages -->
        </div>
        <!-- /.box-body -->
        </div>
      <!-- /. box -->
    </div>
    <!-- /.col -->

Answer 1

有几种方法可以解决您的问题：

1）写入算法，加载数据然后将其与现有数据进行比较。如果您有任何差异，应该只在表中添加新记录。

2）使用WebSockets，它们将使您能够实时从服务器获取新记录。

从数据库加载数据而不闪烁角度Js

1 个答案: