javascript - 在数组 Angular JS 中转换对象的简单方法是什么？

Question

我的应用程序是基于 Angular JS 构建的，并且在服务器上有很多 AJAX 请求。例如，在 PHP 中，我将输出 array 格式化为:

$dialog[$userId] = array(
   'time' => $key,
   'message' => $message['message'],
   'name_user'  => $info['name']
);

echo json_encode($dialog); die();

但是在 Angular JS 中我得到的不是数组而是对象:

549: Objectid_user: "549"message: "Hello"name_user: "Ali Akhmedov"time: 1432070505

问题是，如果使用 ng-repeat 则无法对对象进行排序。为什么在 PHP 中我设置数组但在客户端获取对象？

将对象转换为数组有什么简单的方法？因为我在 AJAX 页面上有很多对象。

Answer 1

您不需要将对象转换为数组以便在 ng-repeat 中对其进行迭代。您可以只使用以下语法:

<div ng-repeat="(key, value) in items">{{key}} => {{value}}</div>

Documentation ngRepeat 的。

不幸的是，这种方法不适用于 orderBy 过滤器。要以特定顺序遍历对象属性，您需要实现自己的过滤器。可能是这样的:

JavaScript

angular.module('app', []).
  filter('orderByKey', ['$filter', function($filter) {
    return function(items, field, reverse) {
      var keys = $filter('orderBy')(Object.keys(items), field, reverse),
          obj = {};
      keys.forEach(function(key) {
        obj[key] = items[key];
      });
      return obj;
    };
  }]);

HTML

<div ng-repeat="(key, value) in items | orderByKey:'-'">{{key}} => {{value}}</div>

笨蛋

http://plnkr.co/edit/DJo0Y6GaOzSuoi202Hkj?p=preview

然而，即使这种方法也只能从 1.4.x 开始工作，因为正如文档中所述，1.4.x 之前的 AngularJS 将按字母顺序对对象属性进行排序在 ngRepeat 中迭代它们时排序。

为了使其在 Angular 1.3.x 甚至 1.2.x 中工作，您可以将对象转换为对象数组，每个对象都将包含key 和 value 属性。这样您就可以在 ngRepeat 中结合 orderBy 等过滤器使用它。这是一个代码:

JavaScript

angular.module('app', []).
  factory('srv', ['$http', function($http) {
    var items = [],
        loaded = false;
    return {
      getItems: function() {
        if(!loaded) { // Lazy loading
          $http.get('data.json').success(function(data) { // {key1: 'val1', key2: 'val2'}
            Object.keys(data).forEach(function(key) {
              items.push({key: key, value: data[key]});
            });
          });
          loaded = true;
        }
        return items; // [{key: 'key1', value:'val1'}, {key:'key2', value: 'val2'}]
      }
    };
  }]).
  controller('ctrl', ['$scope', 'srv', function($scope, srv) {
    $scope.items = srv.getItems();
  }]);

HTML

<div ng-repeat="item in items | orderBy:'-key'">{{item.key}} => {{item.value}}</div>

笨蛋

http://plnkr.co/edit/UXmlm1GKYRZzrOV5pMYT?p=preview