Директива для работы с таблицами на AngularJS

AngularJS очень перспективный и быстро набирающий обороты javascript фреймворк. Я перепробовал много фреймворков и остановился на этом потому, что он в буквальном смысле дает возможность оживить верстку. Мне очень нравится реализация директив, что дают возможность делать заготовки некоторых элементов для частого использования. В интернете есть уйма примеров и готовых решений, но одного решения я не нашел, это и послужило поводом написания данной статьи и небольшой библиотеки.

Я часто сталкиваюсь с данными, а именно с представление данных в виде таблицы. Каждый такой интерфейс должен иметь несколько возможностей: загрузка данных аяксом, разбиение большого объема данных на страницы, фильтрация данных и сортировка.
Мне хотелось решать эти задачи быстро и написанием минимального объема кода.
Вот что у меня вышло:

<table ng-table="tableParams" show-filter="true" class="table">
<tr ng-repeat="user in users">
    <td title="Name" filter="{ 'name': 'text' }" sortable="name">
        {[user.name]}
    </td>
    <td title="Age" filter="{ 'action': 'button' }" sortable="age">
        {[user.age]}
    </td>
</tr>
</table>

Javascript:

var Api = $resource('/data');

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    total: 0,           // length of data
    count: 10,          // count per page
    sorting: {
        name: 'asc'     // initial sorting
    }
});

$scope.$watch('tableParams', function(params) {
    $scope.loading = true;
    // ajax request to api
    Api.get(params.url(), function(data) {
        $scope.loading = false;
        // set new data
        $scope.users = data.result;

        // update table params
        $scope.tableParams.total = data.total;
    });
}, true);

Demo

Как видно из html кода программист сам контролирует заполнение строчек таблицы и шаблон отображения каждой ячейки в ней, что является отличительной чертой отличающие данное решение от других мною рассмотренных, например, ng-grid.

Шапка таблицы и страничная разбивка автоматически генерируются и дописываются к таблице. Вся взаимосвязь между директивой и кодом загрузки данных возложена на параметр tableParams, отслеживание которого помогает узнать когда нужно обновить данные (загрузить с сервера или пересортировать массив).

В итоге мы имеем маленькую директиву, которая делает жизнь немного лучше. Я думаю, что в интернете мало решений подобного рода из-за одного небольшого бага в самом AngularJS. По правде говоря, если бы его не было, то все бы решалось просто при помощи очень классного и полезного тега ng-transclude. Но пока его не исправили надеюсь мое решение будет вам полезным.

Автор: esvit

Источник