我的应用程序是基于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>
ngRepeat
的Documentation。不幸的是,这种方法不适用于
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
中工作,您可以将对象转换为对象数组,其中每个对象都将包含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