AngularJS - 如何使用另一个数组订购 ng-repeat答案

【问题标题】：AngularJS - How to order ng-repeat using another arrayAngularJS - 如何使用另一个数组订购 ng-repeat
【发布时间】：2014-05-07 00:23:59
【问题描述】：

假设我有一个特定顺序的键数组

orderedNames=["mike","bob","sarah];

我有一个 JSON，我想使用 ng-repeat 显示，但按照它们出现在数组中的顺序：

{"people":
    {
    "bob":{
        "hair":"brown",
        "eyes":"blue",
        "height":"tall"
        },
    "sarah":{
        "hair":"blonde",
        "eyes":"blue",
        "height":"short"
        }, 
    "mike":{
        "hair":"red",
        "eyes":"blue",
        "height":"tall"
        }
    }
}

我如何编写一个文件管理器，它会导致 ng-repeat 按数组中指定的顺序吐出人员？

<li ng-repeat="person in people | orderNames"></li>

【问题讨论】：

您为什么不想在控制器中执行此操作？您如何获取数据（带有订单的数组和带有对象的数组）？你试过什么？
我从服务器、对象和键数组中并行获取这两个东西。除非有一种简单的方法可以将它们都填充到过滤器中，否则我可能只会遍历 id 数组并使用每个键直接从模型中获取所有数据，而不是在对象本身上使用 ng-repeat。
zsong 的回答听起来好像可以解决问题。我个人仍然认为更好地操作控制器上的数据，因为您将拥有更多控制权。 zsong 的回答并不能保证你会按照你想要的顺序显示数据。

标签： javascript arrays angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

您可以定义自定义过滤器。

Plunker：http://plnkr.co/edit/fiuuGoGZK7tM5oefKQlS

index.html

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>Filter Example</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<li ng-repeat="person in people|orderNames:orderedNames track by $index">{{person.hair}}</li>
</body>

</html>

app.js：

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

app.controller('MainCtrl', function($scope) {
    $scope.people={
        bob:{
            hair:"brown",
            eyes:"blue",
            height:"tall"
        },
        sarah:{
            hair:"blonde",
            eyes:"blue",
            height:"short"
        },
        mike:{
            hair:"red",
            eyes:"blue",
            height:"tall"
        }
    };
    $scope.orderedNames=["mike","bob","sarah"];

});

app.filter("orderNames",function(){
    return function(input,sortBy) {
        var ordered = [];
        for (var key in sortBy) {
            ordered.push(input[sortBy[key]]);
        }

        return ordered;
    };
});

【讨论】：

【解决方案2】：

你可以试试这样的

<li ng-repeat="name in orderNames">
    {{people[name]}}
</li>

【讨论】：

【解决方案3】：

使用数组作为参考：

http://jsbin.com/jujoj/14/edit

    $scope.persons = {
   bob:{
     name:'bob'
   },
   mike:{
     name: 'mike'
   },
   sarah: {
     name: 'sarah'
   }
 };

 $scope.orderedNames = [$scope.persons.mike, $scope.persons.bob, $scope.persons.sarah];

HTML：<ul ng-repeat="person in orderedNames"> <li>{{ person.name }}</li> </ul>

【讨论】：

【解决方案4】：

通过另一个数组使用 ng-repeat 顺序

在控制器中

$scope.somearray = [1,2,3,4] //or what ever you want to sort by

在模板中。

| orderByArray:somearray:true/false

true/false 设置决定了不在 sortby 数组中的内容是否在被删除或刚刚删除的内容之后输出。

添加过滤器

var app = angular.module("app", []).filter("orderByArray", function () {
            return function (input, sortBy, includeOrphans) {
                //sorts by array and returns items with unsorted items at the end if they are not in the sortby array
                if (!angular.isDefined(input)) { return; }
                var ordered = [];
                var remainder = _.cloneDeep(input);
                angular.forEach(sortBy, function (sortitem) {
                    if (angular.isDefined(input[sortitem])) {
                        ordered.push(input[sortitem]);
                        delete (remainder[sortitem]);
                    }
                });
                if (includeOrphans) {
                    angular.forEach(remainder, function (remainingItem, key) {
                        ordered.push(input[key]);
                    });
                }
                return ordered;
            };
        });

【讨论】：