使用AngularJS对包含@attributes的嵌套JSON数据进行排序

Question

我想用2个不同的属性，人口和平方米对嵌套的JSON数据进行排序。

这是我迄今为止取得的成就。

http://codepen.io/anon/pen/zxooMv

我认为这个问题是NG-重复@属性..

<tr ng-repeat="state in data.states.state"['@attributes']"|orderBy:orderByField:reverseSort"> 

我如何解决这个问题？

Answer 1

使用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">