17

テーブル ヘッダーのアイコン クラスの変更に対処するディレクティブを作成しようとしています。私が望むのは（とにかく私が信じていることです）テーブルヘッダーによるソートを処理する標準的な方法です。ディレクティブはリンク要素を追加し、ユーザーがクリックすると降順で並べ替え、アイコンを降順に変更し、もう一度クリックすると昇順で並べ替え、もう一度アイコンを変更します。ここに私がこれまでに持っているものがありますが、アイコンクラスを処理する方法と、同じテーブルにあるがディレクティブのスコープ外にある他の要素をリセットする方法に途方に暮れています。どんな助けでも素晴らしいでしょう！

angular.directive("tableHeaders", function() {
return {
    restrict: 'E',
    scope: {},
    template:'<i class="glyphicon glyphicon-filter"></i>',
    link: function(scope, element, attrs) {
        attrs.class = 'glyphicon glyphicon-sort-by-alphabet-alt';
    }
}
});

これが私がhtml側に持っているものです:

<th>First Name<a ng-click="newOrderBy('_firstName')"><table-headers></table-headers></a></th>
<th>Last Name<a ng-click="newOrderBy('_lastName')"><table-headers></table-headers></a></th>
<tr ng-repeat="item in items | orderBy:orderBy:reverse>
<td>{{item._firstName}}</td>
<td>{{item._lastName}}</td>
</tr>

order by は現在コントローラーで処理されます。

   $scope.newOrderBy = function(order) {
        $scope.orderBy = order;
        $scope.reverse = !$scope.reverse;
    };
4

2 に答える 2

43

あなたがする必要があるのは、注文と現在の注文（コントローラーからのもの）の両方を提供するディレクティブを使用して、各要素に対してです。

ところで、あなたのディレクティブは、タグではなく属性としてよりよく一致すると思います。次のコードを確認できます。

angular.module('myApp', []).directive("sort", function() {
return {
    restrict: 'A',
    transclude: true,
    template : 
      '<a ng-click="onClick()">'+
        '<span ng-transclude></span>'+ 
        '<i class="glyphicon" ng-class="{\'glyphicon-sort-by-alphabet\' : order === by && !reverse,  \'glyphicon-sort-by-alphabet-alt\' : order===by && reverse}"></i>'+
      '</a>',
    scope: {
      order: '=',
      by: '=',
      reverse : '='
    },
    link: function(scope, element, attrs) {
      scope.onClick = function () {
        if( scope.order === scope.by ) {
           scope.reverse = !scope.reverse 
        } else {
          scope.by = scope.order ;
          scope.reverse = false; 
        }
      }
    }
}
});

それに付随するプランカー: http://plnkr.co/edit/P4cAm2AUGG36nejSjOpY?p=preview

ディレクティブは次のように使用されます。

<thead>
  <tr>
    <th sort by="order" reverse="reverse" order="'name'">Name</th>
    <th>Phone</th>
    <th sort by="order" reverse="reverse" order="'age'">Age</th>        
  </tr>
</thead>
于 2013-09-11T08:28:40.693 に答える
4

独自のディレクティブを作成するつもりがない場合は、利用可能なものを検討することを検討してください。 ngmodules.orgは、テーブル ヘッダー用に既に設定されているいくつかのディレクティブを示しています。

ここでは、いくつかのオプションといくつかのサンプル コードを示し、両方の感触をつかんでいます。どちらも開発されており、非常にカスタマイズ可能です。

ngテーブル

ngTable スナップショット

angular.module('main', ['ngTable'])
.controller('DemoCtrl', function($scope, $filter, ngTableParams) {
    var data = [{name: "Moroni", age: 50}, ... ]

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'asc'     // initial sorting
        }
    }, {
        total: data.length, // length of data
        getData: function($defer, params) {
            // use build-in angular filter
            var orderedData = params.sorting() ?
                                $filter('orderBy')(data, params.orderBy()) :
                                data;

            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
});

UI グリッド

UI グリッドのスナップショット

angular.module('app', ['ngAnimate', 'ui.grid'])
.controller('MainCtrl', function ($scope) {
  $scope.gridOptions1 = {
    enableSorting: true,
    columnDefs: [
      { field: 'name' },
      { field: 'gender' },
      { field: 'company', enableSorting: false }
    ],
    onRegisterApi: function (gridApi) {
      $scope.grid1Api = gridApi;
    }
  };
});
于 2014-12-10T03:27:11.177 に答える