AngularJS OrderBy 问题答案

【问题标题】：AngularJS OrderBy problemsAngularJS OrderBy 问题
【发布时间】：2014-09-05 12:00:06
【问题描述】：

所以我正在学习 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';
}

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-service

【解决方案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);     
    });
});

这里正在工作JSFIDDLE...

【讨论】：