0

我正在尝试在 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”时遇到问题。

4

3 回答 3

1

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

$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

于 2015-06-10T19:19:59.570 回答
0

您必须添加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>

JS

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

于 2015-06-10T18:41:51.077 回答
0

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

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

于 2015-06-10T18:43:05.660 回答