问题描述
<p ng-app='app' ng-controller='appController'> <table><thead><tr> <th>序号</th> <th>内容</th> <th>姓名</th> <th>地点</th> <th>时间</th> <th ng-click='sort(’id’)'>序号</th></tr></thead><tbody> <tr ng-repeat='x in obj | orderBy: ’id’'><td ng-if='$index + 1 === 1' style='color: red'>{{$index + 1}}</td><td ng-if='$index + 1 === 2' style='color: green'>{{$index + 1}}</td><td ng-if='$index + 1 === 3' style='color: yellow'>{{$index + 1}}</td><td ng-if='$index + 1 > 3'>{{$index + 1}}</td><td>{{x.Name}}</td><td>{{x.City}}</td><td>{{x.Country}}</td><td>{{x.Country + x.City}}</td><td>{{x.id}}</td> </tr></tbody> </table></p>
//js文件<script> var app = angular.module(’app’, []); app.controller(’appController’, function($scope, $http) { //数据 $scope.obj = [{ 'Name': 'Alfreds Futterkiste', 'City': 'Berlin', 'Country': 'Germany', 'id': 4},{ 'Name': 'Ana Trujillo Emparedados y helados', 'City': 'México D.F.', 'Country': 'Mexico', 'id': 3},{ 'Name': 'Comércio Mineiro', 'City': 'São Paulo', 'Country': 'Brazil', 'id': 2}, { 'Name': 'Ana Trujillo Emparedados y helados', 'City': 'México D.F.', 'Country': 'Mexico', 'id': 5} ]; });</script>
怎么实现点击序号进行升序降序的排序，新手，求详细的代码，谢谢大家。
问题解答
回答1：html改下：
<p ng-app='app' ng-controller='appController'> <table><thead><tr> <th>序号</th> <th>内容</th> <th>姓名</th> <th>地点</th> <th>时间</th> <th ng-click='toggleSort()'>序号</th></tr></thead><tbody> <tr ng-repeat='x in obj'><td ng-if='$index + 1 === 1' style='color: red'>{{$index + 1}}</td><td ng-if='$index + 1 === 2' style='color: green'>{{$index + 1}}</td><td ng-if='$index + 1 === 3' style='color: yellow'>{{$index + 1}}</td><td ng-if='$index + 1 > 3'>{{$index + 1}}</td><td>{{x.Name}}</td><td>{{x.City}}</td><td>{{x.Country}}</td><td>{{x.Country + x.City}}</td><td>{{x.id}}</td> </tr></tbody> </table></p>
js
//js文件<script> var app = angular.module(’app’, []); app.controller(’appController’, function($scope, $http) {$scope.sortIsAsc = true;//数据 $scope.obj = [{ 'Name': 'Alfreds Futterkiste', 'City': 'Berlin', 'Country': 'Germany', 'id': 4},{ 'Name': 'Ana Trujillo Emparedados y helados', 'City': 'México D.F.', 'Country': 'Mexico', 'id': 3},{ 'Name': 'Comércio Mineiro', 'City': 'São Paulo', 'Country': 'Brazil', 'id': 2}, { 'Name': 'Ana Trujillo Emparedados y helados', 'City': 'México D.F.', 'Country': 'Mexico', 'id': 5} ];$scope.toggleSort = function(){$scope.sortIsAsc = !$scope.sortIsAsc;$scope.obj.sort(function(a, b){ if($scope.sortIsAsc){if (a.id < b.id) { return -1;}if (a.id === b.id) { return 0;}return 1; } if (a.id > b.id) {return -1; } if (a.id === b.id) {return 0; } return 1;}); }; });</script>回答2：
你可以用过滤器 orderBy:’id’:desc来控制排序是升序还是降序。下面的代码你按照3-2-1的顺序看比较容易理解。1、点击一次改变一次desc
<th ng-click='desc=!desc'>序号</th>
2、在appController中设置desc初始化值=0
$scope.desc = 0;
3、在过滤器中添加排序条件
<tr ng-repeat='x in obj | orderBy: ’id’:desc'>
