Angular：刷新表数据而不更改排序/显示答案

【问题标题】：Angular: Refresh table data without changing sort/showAngular：刷新表数据而不更改排序/显示
【发布时间】：2015-06-25 04:55:04
【问题描述】：

我正在尝试构建一个简单的网络应用程序，该应用程序显示按类别分组的项目表。我希望类别是可折叠的，表格是可排序的，并且我希望数据每 60 秒更新一次而不重新加载整个页面（数据来自 my_json_data.php，它查询数据库并将结果输出为 json）。似乎 Angular.js 是执行此操作的首选方式（尤其是最后一部分）。我对此完全陌生，但我的基本功能正常工作，但我遇到了一个问题。当表数据刷新时，它会重置折叠和排序，这是我不希望发生的。以下是所有内容的基本大纲：

index.html:

<body ng-app="myApp">

<div ng-controller="myController">
  <div ng-repeat="category in categories" class="panel panel-primary">

    <!-- Collapsible category panel -->
    <div class="panel-heading">
      <h5 class="panel-title" ng-click="show = !show">
        {{ category.name }}
      </h5>
    </div>

    <!-- Sortable table of items -->
    <div class="table-responsive" ng-hide="show">
      <table class="table table-condensed table-striped">
        <thead>
          <th ng-click="sortType = 'name'; sortReverse = !sortReverse">Name</th>
          <th ng-click="sortType = 'size'; sortReverse = !sortReverse">Size</th>
          <th ng-click="sortType = 'price'; sortReverse = !sortReverse">Price</th>
        </thead>

        <tbody>
          <tr ng-repeat="item in category.items | orderBy:sortType:sortReverse">
            <td>{{ item.name }}</td>
            <td>{{ item.size }}</td>
            <td>{{ item.price }}</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</div>

</body>

工厂：

app.factory('myFactory', ['$http', function($http) {

  var myFactory = {};

  myFactory.getData = function () {
          return $http.get('my_json_data.php');
  };

  return myFactory;

}]);

控制器：

app.controller('myController', ['$scope', '$interval', 'myFactory', function ($scope, $interval, myFactory) {

    $scope.categories;

    getData();

    function getData() {
        myFactory.getData()
            .success(function (data) {
                $scope.categories = data;
            })
            .error(function (error) {
                $scope.status = 'Unable to load data: ' + error.message;
            });
        $interval(getData, 60000);
    };

    $scope.sortType     = 'price'; // set the default sort type
    $scope.sortReverse  = true;  // set the default sort order
}]);

所以一切都完全按照我的意愿运行，除了每 60 秒刷新一次数据时，它会重新打开任何已关闭的类别 div，并将表重新排序为默认顺序。希望有一个相对简单的修复，但如果我犯了一些明显的新手错误，我愿意从头开始重建一切。谢谢！

【问题讨论】：

你能添加你的php脚本返回的json吗？所以创建一个演示jsfiddle更容易。
抱歉耽搁了，现在才看到这个，看来您已经回答了我的问题。谢谢！

标签： angularjs

【解决方案1】：

我认为您的ng-repeat 排序在重新加载数据时会发生变化，因为$$hashkey 被$scope.categories = data; 覆盖

如果您正在克隆以前的 categories 并使用现有的 hashkey 扩展新的 categories，则顺序不受影响。

不确定这是否适用于您的数据，但它在演示中有效。

您的getData 方法中有一个错误。不要使用$interval，因为它会创建许多并行间隔。这里需要$timeout 服务。

在演示中，我将时间设置为 10 秒，因此您无需等待一分钟即可重新加载。

请看下面的演示或jsfiddle。

var app = angular.module('myApp', []);

app.factory('myFactory', ['$http', function($http) {

  var myFactory = {};

  myFactory.getData = function () {
          return $http.get('http://crossorigin.me/http://www.mocky.io/v2/558b11f45f3dcb421106715d');//'my_json_data.php');
  };

  return myFactory;

}]);

app.controller('myController', ['$scope', '$timeout', 'myFactory', function ($scope, $timeout, myFactory) {

    $scope.categories;

    getData();

    function getData() {
        var clonedCat;
        myFactory.getData()
            .success(function (data) {
                console.log(data);
                clonedCat = angular.copy($scope.categories|| {});
                $scope.categories = angular.extend(clonedCat, data);
            })
            .error(function (error) {
                $scope.status = 'Unable to load data: ' + error.message;
            });
        $timeout(getData, 10000); //don't use interval here because it always creates new intervals
    };
    console.log('controller exec.');
    $scope.sortType     = 'price'; // set the default sort type
    $scope.sortReverse  = true;  // set the default sort order
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">

<div ng-controller="myController">
  <div ng-repeat="category in categories" class="panel panel-primary">

    <!-- Collapsible category panel -->
    <div class="panel-heading">
      <h5 class="panel-title" ng-click="show = !show">
        {{ category.name }}
      </h5>
    </div>

    <!-- Sortable table of items -->
    <div class="table-responsive" ng-hide="show">
      <table class="table table-condensed table-striped">
        <thead>
          <th ng-click="sortType = 'name'; sortReverse = !sortReverse">Name</th>
          <th ng-click="sortType = 'size'; sortReverse = !sortReverse">Size</th>
          <th ng-click="sortType = 'price'; sortReverse = !sortReverse">Price</th>
        </thead>

        <tbody>
          <tr ng-repeat="item in category.items | orderBy:sortType:sortReverse">
            <td>{{ item.name }}</td>
            <td>{{ item.size }}</td>
            <td>{{ item.price }}</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
    {{categories|json}}
</div>

</div>

【讨论】：

效果非常好，非常感谢您抽出时间来解决这个问题并向我解释！