angularjs – ng-repeat orderBy对象（angularjs injector）

25-03-03 11

这篇文章主要围绕angularjs–ng-repeatorderBy对象和angularjsinjector展开，旨在为您提供一份详细的参考资料。我们将全面介绍angularjs–ng-repeato

这篇文章主要围绕angularjs – ng-repeat orderBy对象和angularjs injector展开，旨在为您提供一份详细的参考资料。我们将全面介绍angularjs – ng-repeat orderBy对象的优缺点，解答angularjs injector的相关问题，同时也会为您带来Angular ng-repeat中的orderBy数组项值、AngularJS groupBy + orderBy、angularjs ngRepeat orderBy当属性键有空格时、AngularJS orderBy 使用要点的实用方法。

本文目录一览：

angularjs – ng-repeat orderBy对象（angularjs injector）
Angular ng-repeat中的orderBy数组项值
AngularJS groupBy + orderBy
angularjs ngRepeat orderBy当属性键有空格时
AngularJS orderBy 使用要点

angularjs – ng-repeat orderBy对象（angularjs injector）

更新：

在我的html页面上,我使用如下：

<section ng-repeat="template in templates">
        <ng-include src="template"></ng-include>
    </section>

但问题是我需要特定顺序的特定文件,所以有没有办法控制顺序渲染的方式？

我试图通过一个对象来命令我该如何做到这一点,我在网上搜索后才发布它.

function MyCtrl($scope) {
    $scope.templates = {
        template_address: "../template/address.html",template_book: "../template/book.html",template_create: "../template/create.html" 
    };



<div ng-app ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="(name,path) in templates">{{name}}: {{path}}</li>
    </ul>
</div>

http://jsfiddle.net/abuhamzah/6fbpdm9m/

您不能将过滤器应用于普通对象,only to arrays.

你可以做的是在控制器中定义一个方法,将对象转换为数组：

$scope.templatesAry = function () {
    var ary = [];
    angular.forEach($scope.templates,function (val,key) {
        ary.push({key: key,val: val});
    });
    return ary;
};

然后筛选：

<li ng-repeat="prop in templatesAry() | orderBy:'-key'">
     {{prop.key}}: {{prop.val}}
</li>

Example

Angular ng-repeat中的orderBy数组项值

我如何获得Angular的ng-repeat指令以按每个项目的实际值而不是按每个项目的属性值对列表进行排序？

例如：

<ul>    <li ng-repeat="item in items | orderBy:''WHAT_GOES_HERE??''">{{item}}</li></ul>

这是一个玩弄的小提琴：http :
//jsbin.com/okatur/1/edit

我意识到我可以.sort()在阵列上做，但这是我唯一的选择吗？

答案1

小编典典

从1.3.0-rc.5开始

从AngularJS
1.3.0-rc.5开始，如果未提供其他参数，则orderBy过滤器（请参阅文档）将使用其项目自动对数组进行排序。

<li ng-repeat="item in items | orderBy">{{item}}</li>

[JS Bin](http://jsbin.com/okatur/59/edit)

1.3.0-rc.5之前

所述orderBy过滤器（见历史文档）还可以采取一个函数作为第二个参数，其返回值为将使用进行比较<，=和>操作者。为此，您可以简单地使用angular.identity（请参阅文档）：

$scope.identity = angular.identity;<li ng-repeat="item in items | orderBy:identity">{{item}}</li>

[JS Bin](http://jsbin.com/okatur/6/edit)

AngularJS groupBy + orderBy

我正在使用angular-filter中的 groupBy
按对象的date属性对对象数组进行分组。

<div ng-repeat="(day, dayEvents) in events | groupBy: ''date'' )"> <h3>{{ day | date: mediumDate }}</h3></div>

产生以下内容：

Feb 9, 2015 Feb 10, 2015 Feb 11, 2015 Feb 12, 2015

如何从最近的日期开始颠倒顺序？当我打印到控制台时，以我想要的顺序打印阵列：

  Object {     1423699200000: Array[1],     1423612800000: Array[7],     1423526400000: Array[11],     1423440000000: Array[1] }

我还编写了一个自定义过滤器来反转groupBy之后的顺序：

.filter("reverseOrder", function() {        function sortNumber(a,b) {            return  parseInt(b) - parseInt(a);        }        return function(collection) {            var keys = Object.keys(collection).sort(sortNumber);            var reveredCollection= {};            var length=collection.length;            angular.forEach(keys, function(key) {                reveredCollection[key] = collection[key];            });           return reveredCollection;        }    })

我已经这样申请了：

<div ng-repeat="(day, dayEvents) in events | groupBy: ''date'' | reverseOrder )">     <h3>{{ day | date: mediumDate }}</h3></div>

答案1

小编典典

最近有同样的问题。groupBy创建一个对象，但orderBy需要一个数组，因此涉及一些时髦。我最终从他们的问题页面直接得到了答案，其中一位作者出色地解释了该问题，并提供了对我来说基本上是复制/粘贴的代码示例。

https://github.com/a8m/angular-
filter/issues/57#issuecomment-65041792

angularjs ngRepeat orderBy当属性键有空格时

我得到一些 JSON格式的数据,其中一些键中有空格：

[
    {
        "PlainKey": "SomeValue","Spaced Key": "SomeValue"
    },{
        "PlainKey": "SomeValue2","Spaced Key": "SomeValue2"
    }
]

这发生在某个时刻：

$http.get('https://dl.dropBoxusercontent.com/u/80497/htmlTesting/properties/credits.properties' + '?callback=JSON_CALLBACK').then(function (data) {
            $scope.credits = data.data;
        },function (error) {
            $scope.errorOccured = true;
            console.log("Error:");
            console.log(error);
        });

然后使用ng-repeat来显示它,并订购：

<select ng-model="corder">
  <option value="PlainKey">Plain Key</option>
  <option value="Spaced Key">Spaced Key</option>
</select>

<li ng-repeat="credit in credits | orderBy:corder" >
.....
</li>

这不起作用(我得到一个例外)
(PlainKey可以工作,因为没有空格).

我也尝试将值放在’：

<select ng-model="corder">
  <option value="'PlainKey'">Plain Key</option>
  <option value="'Spaced Key'">Spaced Key</option>
</select>

这似乎改变了顺序,但不正确.

我错过了什么？

谢谢！

评论似乎有帮助所以我将其作为答案包括在内：

在对象属性名称中对带有空格的项进行排序的一种方法是将谓词排序函数传递给orderBy,而不是指定对象属性名.特别相关的修改：

HTML：

<li ng-repeat="credit in credits | orderBy:predicate">

JS：

$scope.predicate = function(val) {
  // $scope.corder corresponds to the object property name to sort by
  return val[$scope.corder];
}

示范Plunker.

AngularJS orderBy 使用要点

AngularJS orderBy 使用要点总结：

　　1，书写格式

基本应用格式为：

ng-repeat="item in itemList | orderBy:p1:p2"

参数 p1 可以是字段名或自定义函数，p2 指是否逆序，默认是 false

举例：

假设 $scope 中有

$scope.itemList=[{id:201,name:''abc'',amount:100},{id:100,name:''zdb'',amount:100},
{id:10,name:''xxx'',amount:200},{id:80,name:''231'',amount:1020},
{id:50,name:''ppp'',amount:20},{id:1,name:''hhh'',amount:1100}];

按照 id，倒排序

1	`ng-repeat="item in itemList \| orderBy:''id'':true"`

　 2，自定义排序:

controller 中设置自定义函数，函数接受参数为当前的 item，需要返回一个数值代表该 item 的顺序

$scope.orderIt=function(item){
    if(item.name.indexOf(''h'')===0)return 0;
    return 1;
};

使用方法：

ng-repeat="item in itemList | orderBy:orderIt"

　　3，多字段排序：

如果单个字段排序不能满足需求，那就要祭出绝活了！orderBy 还支持多字段排序，方法如下

ng-repeat="item in itemList | orderBy:[orderIt,''name'',''-amount'']

没错，第一个参数传递数组，可以是自定义函数或字段名，字段名前面加 “-”，代表倒排序。

今天关于angularjs – ng-repeat orderBy对象和angularjs injector的分享就到这里，希望大家有所收获，若想了解更多关于Angular ng-repeat中的orderBy数组项值、AngularJS groupBy + orderBy、angularjs ngRepeat orderBy当属性键有空格时、AngularJS orderBy 使用要点等相关知识，可以在本站进行查询。

本文标签：