Question

我正在尝试构建一个简单的Web应用程序，该应用程序显示按类别分组的项目表。我希望类别可以折叠，表格可以排序，我希望数据每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，并将表重新排序为默认顺序。希望有一个相对简单的解决办法，但如果我犯了一些明显的新秀错误，我愿意从头开始重建一切。谢谢！

Answer 1

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

如果您正在克隆先前的categories并使用现有的哈希键扩展新的，则订单不会受到影响。

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

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

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

请查看下面的演示或此jsfiddle。

＆＃13;

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
}]);

＆＃13;

<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>

＆＃13;

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

1 个答案: