您的位置：首页 > Web前端 > AngularJS

angularjs 实现排序功能

2014-04-30 01:27 357 查看

实现公式：{{orderBy_expression | orderBy:expression:reverse}}

Example

<script>

var app=angular.module("myApp",[]);
app.controller("Ctrl",function($scope){
$scope.friends=[
{name:"John",phone:'555-1212',age:10},
{name:"Mary",phone:'555-9876',age:19},
{name:"Mike",phone:'555-4321',age:21},
{name:"Admin",phone:'555-5678',age:35},
{name:"Julie",phone:'555-8765',age:29},
];
$scope.predicate='-age';
});

<script>

<body>
<div ng-controller="Ctrl">
<pre>Sort predicate={{predicate}};reverse={{reverse}}</pre>
<hr/>
[<a href="" ng-click="predicate=''">unsorted</a>]
<table class="friend">
<tr>
<th>
<a ng-click="predicate='name';reverse=!reverse">Name</a>


</th>
<th><a href="" ng-click="predicate='phone';reverse=!reverse">phone number</a></th>
<th><a href="" ng-click="predicate='age';reverse=!reverse">Age</a></th>

</tr>
<tr ng-repeat="friend in friends | orderBy:predicate:reverse">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航