orderBy 在 HTML div 中不起作用答案

【问题标题】：orderBy not working in HTML divsorderBy 在 HTML div 中不起作用
【发布时间】：2015-06-10 18:30:30
【问题描述】：

我正在尝试在 div 中实现 ng-repeat 功能。为此，我需要先对数据进行排序（根据对象提供的排名），然后将其命名为 div。所以我正在创建一个自定义 OrderBy 函数。我的排序功能运行良好。但是，我总是得到相同的 div 顺序。（事实上，与我需要的完全相反）。我尝试使用反向功能，但它不起作用。

我的排序代码如下所示：

var res = {        
        "Toyota": 2,
        "Ford": 1,
        "Chrysler": 4,
        "Hyundai": 3,
        "Nissan": 5
};

sortedVal = Object.keys(res).sort(function (a, b){
    return res[a] - res[b];
});

我的 HTML div 看起来像这样，

<div class="card" ng-repeat="name in data | orderBy: sortedVal ">

我在控制台中得到了正确的输出。但是，无论我做什么，div 总是按照下面给出的顺序排列。

日产、克莱斯勒、现代、丰田、福特。

我需要它们的顺序：福特、丰田、现代、克莱斯勒、日产。

注意：不要担心“数据中的名称”部分，它运行良好。我在使用“OrderBy”时遇到问题。

【问题讨论】：

sortedVal 不是函数。这是调用 Object.keys(res).sort(...) 的结果：键的排序数组
在这种情况下如何通过 orderBy 传递它？

标签： html angularjs angularjs-orderby

【解决方案1】：

orderBy 接受对象属性的字符串或定义顺序的函数。所以他们不需要自己计算sortedVal，你只需要将计算sortedVal的方法给orderBy即可：

$scope.orderFn = function(a, b) {
  return res[a] - res[b]
}

<div ng-repeat="name in data | orderBy: orderFn"></div>

Plunker：http://plnkr.co/edit/lOeblx28wjAV4RCVRxwq?p=preview

【讨论】：

【解决方案2】：

AngularJS orderBy 过滤器只支持数组——不支持对象。所以你必须编写一个自己的小过滤器。请通过以下小提琴它可以帮助你

http://jsfiddle.net/4tkj8/1/

【讨论】：

我认为 orderBy 有效。它只是给了我不正确的结果。好吧，它可能因为我不知道的其他事情而起作用？

【解决方案3】：

您必须将sortedVal 添加到控制器范围，然后它才能在视图中使用。

var res = {        
        "Toyota": 2,
        "Ford": 1,
        "Chrysler": 4,
        "Hyundai": 3,
        "Nissan": 5
};

$scope.sortedVal = Object.keys(res).sort(function (a, b){
    return res[a] - res[b];
});

或者您可以创建自定义过滤器以按值对对象进行排序。像这样。

HTML

<div class="card" ng-repeat="(key, value) in data | orderObjectByValue">
      {{key}} {{value}}
</div>

app.filter('orderObjectByValue', function() {
  return function(items) {
    var filtered = Object.keys(items).sort(function (a, b){
        return items[a] - items[b];
    });
    return filtered;
  };
});

演示 http://plnkr.co/edit/jdIf9hjiUrR6la02aVjA?p=preview

【讨论】：

sortedVal 给了我正确的顺序。 orderBy 没有给我想要的结果。就我而言，我需要同时使用 orderBy 和 ng-repeat，因为我从两个不同的来源获取数据，一个用于数据，一个用于排名。