Javascript AngularJS-如何使用另一个数组排序ng repeat_Javascript_Arrays_Angularjs_Angularjs Ng Repeat_Angularjs Filter

Javascript AngularJS-如何使用另一个数组排序ng repeat

javascript arrays angularjs

Javascript AngularJS-如何使用另一个数组排序ng repeat,javascript,arrays,angularjs,angularjs-ng-repeat,angularjs-filter,Javascript,Arrays,Angularjs,Angularjs Ng Repeat,Angularjs Filter,假设我有一个按特定顺序排列的键数组 orderedNames=["mike","bob","sarah]; 我有一个JSON，我想用ng repeat来显示，但是按照它们在数组中出现的顺序： {"people": { "bob":{ "hair":"brown", "eyes":"blue", "height":"tall" }, "sarah":{ "hair":"blonde",

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

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>

您可以试试这样的方法

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


{{人[名]}}

您可以试试这样的方法

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


{{人[名]}}

使用数组作为参考：

HTML:


{{person.name}

使用数组作为参考：

HTML:


{{person.name}

您可以定义自定义过滤器

普朗克：

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>

您可以定义自定义筛选器

普朗克：

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>

要通过另一个数组重复顺序，请使用

在控制器中

$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;
            };
        });

要通过另一个数组重复顺序，请使用

在控制器中

$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;
            };
        });

为什么不想在控制器中执行此操作？如何获取其中一个数据（带顺序的数组和另一个带对象的数组）？你试过什么？我正在从服务器、对象和密钥数组中同时获得这两种东西。除非有一种简单的方法将它们都塞进一个过滤器，否则我可能只是在ID数组中进行迭代，使用每个键直接从模型中获取所有数据，而不是在对象本身上使用ng repeat。zsong的回答听起来像是这样。我个人仍然认为在控制器上操作数据更好，因为您将拥有更多的控制权。zsong的回答并不能保证数据会按您想要的顺序显示。为什么不在控制器中执行此操作？如何获取其中一个数据（带顺序的数组和另一个带对象的数组）？你试过什么？我正在从服务器、对象和密钥数组中同时获得这两种东西。除非有一种简单的方法将它们都塞进一个过滤器，否则我可能只是在ID数组中进行迭代，使用每个键直接从模型中获取所有数据，而不是在对象本身上使用ng repeat。zsong的回答听起来像是这样。我个人仍然认为在控制器上操作数据更好，因为您将拥有更多的控制权。zsong的回答并不能保证数据会按您想要的顺序显示。