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

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

echo json_encode($dialog); die();

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



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

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

最佳答案

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

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

不幸的是,这种方法不适用于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开始起作用,因为正如文档中所述,AngularJS在1.4.x之前将按字母顺序对对象属性进行排序,同时在ngRepeat中对其进行迭代。

为了使其在Angular 1.3.x甚至1.2.x中工作,您可以将对象转换为对象数组,其中每个对象都将包含keyvalue属性。这样,您就可以在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

09-10 10:31
查看更多