AngularJS排序问题

因此，我正在学习angularJS，并在使用ng repeat和$http服务

我选择了一个Web服务来返回一些数据，并将其放入ng repeat中，所有这些都可以正常工作

我想能够重新组织表A-Z，Z-A的颜色名称，但我无法让它工作。我很确定这与我要返回的JSON的结构有关

JSFiddle：

HTML代码：

<div ng-controller="testCtrl">Sort :
<select ng-model="selectedColumn">
<option value="name">A-Z</option>
<option value="-name">Z-A</option>
</select>
<table>
<tr>
<th>Name</th>
<th>Cloth</th>
<th>Leather</th>
<th>Metal</th>
</tr>
<tr ng-repeat="color in colorData | orderBy:selectedColumn">
<td>{{color.name}}</td>
<td style="background: rgb({{color.cloth.rgb.join()}});">{{color.cloth.rgb}}</td>
<td style="background: rgb({{color.leather.rgb.join()}});">{{color.cloth.rgb}}</td>
<td style="background: rgb({{color.metal.rgb.join()}});">{{color.cloth.rgb}}</td>
</tr>
</table> <pre>{{colorData | json}}</pre>
<!-- !!!!!!!!! -->
</div>

---

您的返回数据不是数组，orderBy仅适用于数组

您应该将所有数据按顺序推入数组，以便使用

orderBy

如果您这样重新排列代码，它将正常工作

这里是工作

var app = angular.module('myApp', []);

function testCtrl($scope, $http) {

$http.get('https://api.guildwars2.com/v1/colors.json').success(function (data) {
    $scope.colorData = data.colors;
});

$scope.selectedColumn = 'name';
}

$http.get('https://api.guildwars2.com/v1/colors.json').success(function (data) {
    $scope.colorData = [];
    angular.forEach(data.colors, function(color){
       $scope.colorData.push(color);     
    });
});