Question

我使用其密钥代码提取美国各州的JSON，其中key是其州代码，如NY，value是州的名称，如{ {1}}。在New York下拉列表中，即使在执行<select>之后，我也无法按value按字母顺序排序（我也尝试使用orderBy: value）。由于某种原因，始终按'value'排序。

正因为如此，key之前出现的选项North Carolina等错误正在发生。

在此处重现问题：

Nebraska

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){

  var data = {
    "dropdowns": {
      "RI": "Rhode Island",
      "HI": "Hawaii",
      "NY": "New York",
      "GA": "Georgia",
      "NV": "Nevada",
      "TN": "Tennessee",
      "CA": "California",
      "OK": "Oklahoma",
      "ME": "Maine",
      "VA": "Virginia",
      "MI": "Michigan",
      "OH": "Ohio",
      "DE": "Delaware",
      "ID": "Idaho",
      "FL": "Florida",
      "IA": "Iowa",
      "MD": "Maryland",
      "MA": "Massachusetts",
      "SC": "South Carolina",
      "AR": "Arkansas",
      "UT": "Utah",
      "IL": "Illinois",
      "IN": "Indiana",
      "CT": "Connecticut",
      "DC": "District of Columbia",
      "MN": "Minnesota",
      "KY": "Kentucky",
      "WI": "Wisconsin",
      "AZ": "Arizona",
      "MO": "Missouri",
      "KS": "Kansas",
      "OR": "Oregon",
      "MS": "Mississippi",
      "LA": "Louisiana",
      "NH": "New Hampshire",
      "WA": "Washington",
      "NJ": "New Jersey",
      "NM": "New Mexico",
      "AK": "Alaska",
      "TX": "Texas",
      "AL": "Alabama",
      "CO": "Colorado",
      "PA": "Pennsylvania",
      "NC": "North Carolina",
      "NE": "Nebraska"
    }
  };

  $scope.retailStates = data.dropdowns;

}]);

我该如何解决这个问题？

如果您知道使用<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body ng-app='myApp'> <div ng-controller="MyCtrl"> <select> <option value="">Select</option> <option ng-repeat="(key,value) in retailStates | orderBy: value" value="{{key}}">{{value}}</option> </select> </div> </body> </html>，请随时向我推荐替代解决方案。

Answer 1

Angular团队表示不建议在对象的键上使用ng-repeat，even regrets adding that functionality。最简单的解决方案可能只是将对象转换为数组。

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){

  var data = {
    "dropdowns": {
      "RI": "Rhode Island",
      "HI": "Hawaii",
      "NY": "New York",
      "GA": "Georgia",
      "NV": "Nevada",
      "TN": "Tennessee",
      "CA": "California",
      "OK": "Oklahoma",
      "ME": "Maine",
      "VA": "Virginia",
      "MI": "Michigan",
      "OH": "Ohio",
      "DE": "Delaware",
      "ID": "Idaho",
      "FL": "Florida",
      "IA": "Iowa",
      "MD": "Maryland",
      "MA": "Massachusetts",
      "SC": "South Carolina",
      "AR": "Arkansas",
      "UT": "Utah",
      "IL": "Illinois",
      "IN": "Indiana",
      "CT": "Connecticut",
      "DC": "District of Columbia",
      "MN": "Minnesota",
      "KY": "Kentucky",
      "WI": "Wisconsin",
      "AZ": "Arizona",
      "MO": "Missouri",
      "KS": "Kansas",
      "OR": "Oregon",
      "MS": "Mississippi",
      "LA": "Louisiana",
      "NH": "New Hampshire",
      "WA": "Washington",
      "NJ": "New Jersey",
      "NM": "New Mexico",
      "AK": "Alaska",
      "TX": "Texas",
      "AL": "Alabama",
      "CO": "Colorado",
      "PA": "Pennsylvania",
      "NC": "North Carolina",
      "NE": "Nebraska"
    }
  };

  $scope.retailStates = [];
  for(var key in data.dropdowns){
     $scope.retailStates.push({"key": key, "value": data.dropdowns[key] }); 
  }
  

}]);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app='myApp'>
    <div ng-controller="MyCtrl">
      <select>
        <option value="">Select</option>
        <option ng-repeat="state in retailStates | orderBy: 'value'" value="{{state.key}}">{{state.value}}</option>
      </select>
    </div>
  </body>
</html>

Answer 2

传递给orderBy的参数需要匹配对象数组中的属性名称，这意味着您的数据需要更改为如下所示

$scope.retailStates = [ { stateCode:"RI", stateName:"Rhode Island"},
                        { stateCode:"HI", stateName:"Hawaii"}
                      ];

等等。

这会将ng-repeat更改为

ng-repeat="retailStates in retailStates | orderBy: stateName"

orderBy与键，值对无法正常工作

2 个答案: