ng-clickを使用してアイコンのテーブルに場所を取得

Question

ng-repeatを使用して生成されたテーブルがあります。列ヘッダーでは、列をソートする必要があります。テキストの隣にfont-awesomeのソートアイコンが含まれていて、クリックしたときにng-clickにng-click="sortColumn()"と表示されます。私はこれをすべての列見出しに呼んでいます。

どの列ヘッダーがクリックされたかをどのように知ることができますか？今は各ヘッダー列に対して起動します。

ng-clickを使用して現在の列を渡すにはどうすればよいですか？

thisで渡そうとしましたが、$scopeオブジェクトを返します。

は、ここで私がこれまで持っているものだ：私はあなただけsortColumnにオブジェクトとして列を渡すことができるとは思わない

HTML:

<table class="table"> 
    <thead> 
     <tr> 
      <td><b>Product </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td> 
      <td><b>Code </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td> 
      <td><B>Available </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td> 
      <td><B>Price </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td> 
     </tr> 
    </thead> 
    <tbody> 
     {{ vm.noProducts }} 
     <tr ng-repeat="product in vm.products"> 
      <td>{{ product.productName}}</td> 
      <td>{{ product.productCode }}</td> 
      <td>{{ product.releaseDate | date }}</td> 
      <td>{{ product.price | currency }}</td> 
     </tr> 
    </tbody> 
</table> 

Javascript:

vm.sortColumn = function (obj) { 
    console.log(obj); 
} 

Answer 1

（）。その機能に列が必要な場合は、トラフ製品をループさせて、たとえばすべての製品名が入力される新しい配列を作成することができます。 たぶん、その関数は次のようになります。あなたは、テーブルをソートしたい

function getColumn(val){ // 'productName' 
     var column = []; 
     for(var i in $scope.products){ 
     column.push(column.push($scope.products[i][val])) 
     } 
     return column 
} 

場合はorderByフィルタを使用することができます。 sortColumn（）関数にパラメータ名を渡し、ng-repeatでorderByを使用して、いずれかのパラメータで昇順/降順列を並べ替えます。

<table class="table"> 
    <thead> 
     <tr> 
      <td ng-click="sortColumn('productName')"><b>Product </b></td> 
      <td ng-click="sortColumn('productCode')"><b >Code </b></td> 
      <td ng-click="sortColumn('releaseDate')"><b >Available </b></td> 
      <td ng-click="sortColumn('price')"><b >Price </b></td> 
     </tr> 
    </thead> 
    <tbody> 

     <tr ng-repeat="product in products | orderBy: criteria"> 
      <td>{{ product.productName}}</td> 
      <td>{{ product.productCode }}</td> 
      <td>{{ product.releaseDate | date }}</td> 
      <td>{{ product.price | currency }}</td> 
     </tr> 
    </tbody> 
</table> 

コントローラでは、orderBy基準のデフォルト値を設定します。ユーザは、例えば製品コードをクリックすると製品コード上のユーザーのクリックが再びすべてが基準で降順にソートされる場合は、すべての行が、（「製品コード」）を昇順その基準によってソートされます

$scope.criteria = 'productName'; 

    $scope.sortColumn = function(val){ 
     console.log(val) 
     if($scope.criteria == val){ 
     $scope.criteria = "-"+val; 
     } else { 
     $scope.criteria = val; 
     } 

（私は商品名ここで使用しました） '-productCode'

これを示すために小さなplunkerを作成しました。それが役に立てば幸い。