Javascript 如何使用angularjs按自定义字段排序？_Javascript_Html_Angularjs

Javascript 如何使用angularjs按自定义字段排序？

javascript html angularjs

Javascript 如何使用angularjs按自定义字段排序？,javascript,html,angularjs,Javascript,Html,Angularjs,我想创建一个html表来使用angular js显示用户结果，它有三种状态：“通过”、“进行中”和“失败”。这是我的密码： angular.module('myExam', []) .controller('myCtrl', ['$scope', function($scope) { $scope.Exam_result = [{name:'John', result:'Fail', age:10}, {name:'Mary', r

我想创建一个html表来使用angular js显示用户结果，它有三种状态：“通过”、“进行中”和“失败”。这是我的密码：

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;
      };
    }]);


{{Exam.name}
{{Exam.result}
{{考试年龄}

我希望用户可以单击状态并按此方式排序，而不是按字母顺序排序：第一个“通过”，第二个“失败”，第三个“正在进行”

这是我的链接：

我建议您使用smart table，它有很好的文档和易于使用的功能

您的Fiddle中没有字段状态谢谢，您所说的谢谢是什么意思？现在我仍然看不到状态OK？？现在，同样唯一的结果列是，你的Fiddle中没有字段状态谢谢，你说的谢谢是什么意思？现在我仍然看不到状态OK？？现在也有了相同的唯一结果列

<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>