angularjs - event - ng-model

Directiva AngularJS para cabecera de mesa

Question

Estoy tratando de escribir una directiva para lidiar con el cambio de una clase de iconos para los encabezados de tablas. Lo que me gustaría es (lo que creo de todos modos) la forma estándar de tratar con la clasificación por encabezados de tabla. La directiva agregaría un elemento de enlace y, al hacer clic en un usuario, ordenar por desc y cambiar el ícono a desc, al hacer clic nuevamente ordenar por asc y una vez más el ícono. Esto es lo que tengo hasta ahora, pero ahora no sé cómo tratar con la clase de iconos, así como restablecer otros elementos en la misma tabla pero fuera del alcance de la directiva. Cualquier ayuda sería genial!

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

Esto es lo que tengo para el lado 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>

El orden por se maneja actualmente en el controlador:

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

Answer 1

A menos que tenga la intención de escribir su propia directiva, puede considerar consultar lo que está disponible. ngmodules.org muestra algunas directivas que ya están configuradas para los encabezados de tablas.

Aquí hay un par de opciones con algunos ejemplos de código para que pueda tener una idea de ambos. Ambos parecen ser desarrollados y muy personalizables.

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 Grid

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

Answer 2

Lo que debe hacer es para cada elemento utilizando su directiva, proporcionando tanto un pedido como el pedido actual (el de su controlador).

Por cierto, creo que su directiva será una mejor coincidencia como atributo y no como etiqueta. Puedes consultar el siguiente código:

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

Y el plunker que lo acompaña: http://plnkr.co/edit/P4cAm2AUGG36nejSjOpY?p=preview

La directiva se utiliza como tal:

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