Del*_*emm 221 javascript arrays reverse angularjs angularjs-ng-repeat
如何在角度中获得反转阵列？我正在尝试使用orderBy过滤器,但它需要一个谓词(例如'name')来排序:
<tr ng-repeat="friend in friends | orderBy:'name':true">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
<tr>
有没有办法反转原始数组,没有排序.像那样:
<tr ng-repeat="friend in friends | orderBy:'':true">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
<tr>
Jay*_*com 327
我建议使用这样的自定义过滤器:
app.filter('reverse', function() {
return function(items) {
return items.slice().reverse();
};
});
然后可以使用它,如:
<div ng-repeat="friend in friends | reverse">{{friend.name}}</div>
看到它在这里工作:Plunker演示
可根据您的需要定制此过滤器以满足您的需求.我在演示中提供了其他示例.一些选项包括在执行反向之前检查变量是否为数组,或者使其更宽松以允许反转更多事物(如字符串).
ami*_*kle 196
这是我用过的:
<alert ng-repeat="alert in alerts.slice().reverse()" type="alert.type" close="alerts.splice(index, 1)">{{$index + 1}}: {{alert.msg}}</alert>
更新:
对于旧版本的Angular,我的回答是可以的.现在,你应该使用
ng-repeat="friend in friends | orderBy:'-'"
要么
ng-repeat="friend in friends | orderBy:'+':true"
Dmi*_*har 124
很抱歉在一年后提出这个问题,但有一个新的,更简单的解决方案,适用于Angular v1.3.0-rc.5及更高版本.
在文档中提到:"如果没有提供属性,(例如'+'),则数组元素本身用于比较排序".所以,解决方案将是:
ng-repeat="friend in friends | orderBy:'-'" 要么
ng-repeat="friend in friends | orderBy:'+':true"
这个解决方案似乎更好,因为它不会修改数组,也不需要额外的计算资源(至少在我们的代码中).我已经阅读了所有现有的答案,仍然喜欢这个答案.
小智 52
您可以通过$ index参数进行反转
<tr ng-repeat="friend in friends | orderBy:'$index':true">
小智 44
简单的解决方案: - (无需制作任何方法)
ng-repeat = "friend in friends | orderBy: reverse:true"
And*_*ahl 17
您可以在示波器上调用一个方法来为您反转它,如下所示:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('Ctrl', function($scope) {
$scope.items = [1, 2, 3, 4];
$scope.reverse = function(array) {
var copy = [].concat(array);
return copy.reverse();
}
});
</script>
</head>
<body ng-controller="Ctrl">
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<ul>
<li ng-repeat="item in reverse(items)">{{item}}</li>
</ul>
</body>
</html>
请注意,$scope.reverse因为Array.prototype.reverse修改了原始数组,所以创建了数组的副本.
Kum*_*mar 13
如果您使用的是1.3.x,则可以使用以下命令
{{ orderBy_expression | orderBy : expression : reverse}}
示例按发布日期降序列出书籍
<div ng-repeat="book in books|orderBy:'publishedDate':true">
来源:https://docs.angularjs.org/api/ng/filter/orderBy
小智 10
如果您使用的是angularjs 1.4.4及更高版本,一种简单的排序方法是使用" $ index ".
<ul>
<li ng-repeat="friend in friends|orderBy:$index:true">{{friend.name}}</li>
</ul>