使用 AngularJS 对包含 @attributes 的嵌套 JSON 数据进行排序
Sorting nested JSON-data containing @attributes with AngularJS
我正在尝试对具有 2 个不同属性(人口和平方英里)的嵌套 JSON 数据进行排序。
这是我到目前为止所取得的成就。
http://codepen.io/anon/pen/zxooMv
我认为问题在于 ng-repeat @attributes..
<tr ng-repeat="state in data.states.state"['@attributes']"|orderBy:orderByField:reverseSort">
我该如何解决?
使用 array.map
你可以投影你的数据,这样更容易处理和摆脱 @attributes
属性:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.orderByField = 'population';
$scope.reverseSort = false;
var data = {"states":{
"state":[{
"@attributes":{ "name":"ALABAMA","abbreviation":"AL","capital":"Montgomery","most-populous-city":"Birmingham","population":"4708708","square-miles":"52423","time-zone-1":"CST (UTC-6)","time-zone-2":"EST (UTC-5)","dst":"YES"}},{
"@attributes":{"name":"ALASKA","abbreviation":"AK","capital":"Juneau","most-populous-city":"Anchorage","population":"698473","square-miles":"656425","time-zone-1":"AKST (UTC-09)","time-zone-2":"HST (UTC-10)","dst":"YES"}}]}};
data.states.state = data.states.state.map(function(value) {
return value['@attributes'];
});
// at this stage the data variable will look like this:
//{
// "states": {
// "state": [
// {
// "name": "ALABAMA",
// "abbreviation": "AL",
// "capital": "Montgomery",
// "most-populous-city": "Birmingham",
// "population": "4708708",
// "square-miles": "52423",
// "time-zone-1": "CST (UTC-6)",
// "time-zone-2": "EST (UTC-5)",
// "dst": "YES"
// },
// {
// "name": "ALASKA",
// "abbreviation": "AK",
// "capital": "Juneau",
// "most-populous-city": "Anchorage",
// "population": "698473",
// "square-miles": "656425",
// "time-zone-1": "AKST (UTC-09)",
// "time-zone-2": "HST (UTC-10)",
// "dst": "YES"
// }
// ]
// }
//}
$scope.data = data;
});
现在在您看来,您可以简单地使用它:
<tr ng-repeat="state in data.states.state|orderBy:orderByField:reverseSort">
我正在尝试对具有 2 个不同属性(人口和平方英里)的嵌套 JSON 数据进行排序。
这是我到目前为止所取得的成就。
http://codepen.io/anon/pen/zxooMv
我认为问题在于 ng-repeat @attributes..
<tr ng-repeat="state in data.states.state"['@attributes']"|orderBy:orderByField:reverseSort">
我该如何解决?
使用 array.map
你可以投影你的数据,这样更容易处理和摆脱 @attributes
属性:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.orderByField = 'population';
$scope.reverseSort = false;
var data = {"states":{
"state":[{
"@attributes":{ "name":"ALABAMA","abbreviation":"AL","capital":"Montgomery","most-populous-city":"Birmingham","population":"4708708","square-miles":"52423","time-zone-1":"CST (UTC-6)","time-zone-2":"EST (UTC-5)","dst":"YES"}},{
"@attributes":{"name":"ALASKA","abbreviation":"AK","capital":"Juneau","most-populous-city":"Anchorage","population":"698473","square-miles":"656425","time-zone-1":"AKST (UTC-09)","time-zone-2":"HST (UTC-10)","dst":"YES"}}]}};
data.states.state = data.states.state.map(function(value) {
return value['@attributes'];
});
// at this stage the data variable will look like this:
//{
// "states": {
// "state": [
// {
// "name": "ALABAMA",
// "abbreviation": "AL",
// "capital": "Montgomery",
// "most-populous-city": "Birmingham",
// "population": "4708708",
// "square-miles": "52423",
// "time-zone-1": "CST (UTC-6)",
// "time-zone-2": "EST (UTC-5)",
// "dst": "YES"
// },
// {
// "name": "ALASKA",
// "abbreviation": "AK",
// "capital": "Juneau",
// "most-populous-city": "Anchorage",
// "population": "698473",
// "square-miles": "656425",
// "time-zone-1": "AKST (UTC-09)",
// "time-zone-2": "HST (UTC-10)",
// "dst": "YES"
// }
// ]
// }
//}
$scope.data = data;
});
现在在您看来,您可以简单地使用它:
<tr ng-repeat="state in data.states.state|orderBy:orderByField:reverseSort">