Question

所以我正在学习angularJS，并且正在使用ng-repeat和$ http服务。

我选择了一个web服务来返回一些数据，然后把它放到ng-repeat中，一切正常。

我希望能够通过颜色名称重新组织表A-Z，Z-A，但我无法使其正常工作。我很确定这与我回来的JSON的结构有关。

JSFiddle：http://jsfiddle.net/wshekyls/bKGPj/

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>

JS：

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';
}

Answer 1

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

您应该将所有数据推送到数组中，以便与orderBy一起使用，如果您重新安排代码，就可以使用...

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

这是workin JSFIDDLE ...

AngularJS OrderBy问题

1 个答案: