2017-10-19 15 views
1

角度のjsを使用してユーザーの結果を表示するhtmlテーブルを作成するには、「パス」、「処理中」および「失敗」の3つのステータスがあります。アルファベット順ではなく、私は、ユーザーがステータスをクリックして、そのようにそれを並べ替えることができます願っていanglejsをカスタムフィールドで注文するにはどうすればいいですか?

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> 

: はここに私のコードは ' 最初の「パス」、2番目の「失敗」、第三プロセスではここ

は私のリンクです:

Fiddle

+0

一切フィールドの状態は – Sajeetharan

+0

THANKS、http://jsfiddle.net/v9334apr/6/ – francoleung

+0

あなたが感謝で何を意味するのかは、あなたのバイオリンではありませんか?まだ私は状態を参照してください – Sajeetharan

答えて

関連する問題