如何使用angularjs按自定义字段排序?
问题描述:
我想创建一个html表来使用angular js来显示用户结果,它有三个状态:“Pass”,“In Process”和“Fail”。 这里是我的代码:如何使用angularjs按自定义字段排序?
angular.module('myExam', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.Exam_result =
[{name:'John', result:'Fail', age:10},
{name:'Mary', result:'Pass', age:19},
{name:'Mike', result:'In Process', age:21},
{name:'Adam', result:'In Process', age:35},
{name:'Julie',result:'Fail', age:29}];
$scope.predicate = 'age';
$scope.reverse = true;
$scope.order = function(predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
}]);
<body ng-app="myExam">
<div ng-controller="myCtrl">
<table class="Exam" border="1">
<tr>
<th>
<a href="" ng-click="order('name')">Name</a>
<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
</th>
<th>
<a href="" ng-click="order('result')">Phone Number</a>
<span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
</th>
<th>
<a href="" ng-click="order('age')">Age</a>
<span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
</th>
</tr>
<tr ng-repeat="Exam in Exam_result | orderBy:predicate:reverse">
<td>{{Exam.name}}</td>
<td>{{Exam.result}}</td>
<td>{{Exam.age}}</td>
</tr>
</table>
<hr>
</body>
我希望用户可以通过点击状态和像这样排序,的字母来代替: 一是“合格”,第二个“失败”,第三“在过程
这里是我的链接:
有你的提琴 – Sajeetharan
感谢,http://jsfiddle.net/v9334apr/6/ – francoleung
无场状态你是什么意思的感谢?仍然我看到没有状态 – Sajeetharan