AngularJs双方向ソートフィルター？

双方向ソートフィルタの実装例は？AngularJs双方向ソートフィルター？

2017-02-07 Pramod Kharade

<!DOCTYPE html> 
<html> 
<head> 
    <title>Angularjs-Bidirectional Sort </title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<style type="text/css"> 
table{ 
    border-collapse: collapse; 
    font-family: Arial; 
} 
td{ 
    border: 1px solid black; 
    padding: 5px; 
} 
th{ 
    border:1px solid black; 
    padding: 5px; 
    text-align: left; 
} 
.arrow-up{ 
width: 0; 
height: 0; 
border-left: 5px solid transparent; 
border-right: 5px solid transparent; 
border-bottom: 10px solid black; 
display: inline-block; 
} 
.arrow-down{ 
width: 0; 
height: 0; 
border-left: 5px solid transparent; 
border-right: 5px solid transparent; 
border-top: 10px solid black; 
display: inline-block; 
} 

</style> 

<body > 
<p> 1.How to implement bidirectional sort in Angular<br> 
    Use orderByfilter <br> 

</p> 
<div ng-app="myModule"> 
    <div ng-controller="myController"> 

    <table border="1"> 
     <thead><tr><th ng-click="sortData('name')">Name <div ng-class="getSortClass('name')"></div></th> 
     <th ng-click="sortData('dateOfBirth')">Date of Birth<div ng-class="getSortClass('dateOfBirth')"></div></th> 
     <th ng-click="sortData('gender')">Gender<div ng-class="getSortClass('gender')"></div></th> 
     <th ng-click="sortData('salary')">Salary(Number) <div ng-class="getSortClass('salary')"></div></th> 
     <th ng-click="sortData('salary')">Salary(Currency)<div ng-class="getSortClass('salary')"></div></th> 
     </tr></thead> 
     <tbody> 
      <tr ng-repeat="employee in employees | orderBy:sortColumn:reverseSort"> 
       <td>{{employee.name | uppercase}}</td> 
       <td>{{employee.dateOfBirth | date:dd/mm/yyyy}}</td> 
       <td>{{employee.gender | lowercase}}</td> 
       <td>{{employee.salary | number:2}}</td> 
       <td>{{employee.salary | currency:"Rs: ":1}}</td> 
      </tr> 
     </tbody> 
    </table> 

</div> 

</div> 

</body> 
</html> 

<script type="text/javascript"> 

//creating the module ,controller and registering with the module all done in one line 
//Use the method chaining mechnism as show below: 
var myApp = angular.module('myModule', []).controller("myController",function($scope){ 
    var employees = [ 
      {name:"Pramod",dateOfBirth: new Date("February 01,1987"),gender:"Male",salary:45799.50}, 
      {name:"Dipika",dateOfBirth: new Date("May 29,1987"),gender:"Female",salary:50799.50}, 
      {name:"Vasant",dateOfBirth: new Date("May 22,1990"),gender:"Male",salary:40000.50}, 
      {name:"Navanath",dateOfBirth: new Date("June 12,1987"),gender:"Male",salary:51799.50}, 
      {name:"Komal",dateOfBirth: new Date("March 29,1991"),gender:"Female",salary:54799.50} 
    ]; 
    $scope.employees = employees; 
    $scope.sortColumn = "name"; 
    $scope.reverseSort = false; 

    $scope.sortData = function(column){ 
     $scope.reverseSort = ($scope.sortColumn==column)? !$scope.reverseSort:false; 
     $scope.sortColumn = column; 
    } 
    $scope.getSortClass = function(column){ 
     if($scope.sortColumn == column){ 
      return $scope.reverseSort? 'arrow-down':'arrow-up'; 
     } 
     return ''; 
    } 

}); 

</script>

出典

2017-02-07 12:32:25

はあなた自身の質問に答えるか、あなたの質問のこの部分でいます（？後者の場合は、この回答を削除してコードを質問に移動してください） –

実際、私はangularjsのために新しく、私は双方向検索の問題に直面していました。私はこれをこのように解決しました。私はここで何かを助けるために共有することを感じました。 –

ありがとうございます。 AngularJSの新しい候補者のための非常に正確なans –

私はすでにこのような場合のためのソリューションを構築しましたが、リポジトリは現時点では使用できません。

例テキスト（または日付）

var vm = this; //head of your controller 
vm.sortBy = {type:'ouvertes',name:'ouvertes'}; 
vm.sortFunction = sortFunction; 

    /** 
    * @param {Object} 
    */ 
    function sortFunction (sortBy){ 
     var reverse = false; 
     if(sortBy.order == "desc"){ 
      reverse = true; 
     } 

     vm. xx(name of your list) = $filter('orderBy')(vm.xx(name of your list), sortBy.type, reverse); 
    } 

    /* 
    * sort is object and type is the column youy want to sort (that suppose you have list of objects) 
    */

があなたのテーブルと、彼らは元の関数に渡されますのparamsのthead要素にNGクリックソートセットをトリガするために（= "youctrl.sortFunctionをNGクリック（{順：「1」、種類：「nameofyourobjectproperty」}）。」

とデフォルトのソートを設定するために、手動でクリックを誘発する

出典

2017-02-07 12:58:28

Ansはかなり複雑です –

これは非常に複雑で、私は例を作成することができます他の解決策を持っていない、非常に簡単です。 –

あなたの投稿を解決済みとして設定してください！ –

AngularJs双方向ソートフィルター？

答えて

関連する問題