НГ-сетки разбиения на страницы пользовательских директив

В angular js я использовал ng-grid. Я хочу управлять ng-grid разбиением на страницы с помощью пользовательской директивы. то есть я хочу удалить повторение кода (ниже кода) на каждой странице. Итак, как написать пользовательскую директиву для управления ng-grid разбиением на страницы.

//Configure Page Option
scope.pagingOptions = {
    pageSizes: [10, 20, 30, 500, 1000, 5000], //page Sizes
    pageSize: 10, //Size of Paging data
    currentPage: 1 //what page they are currently on
};
scope.gridOptions.pagingOptions = scope.pagingOptions;
scope.gridOptions.showFooter = true;
scope.gridOptions.enablePaging = true;
scope.gridOptions.totalServerItems = 'totalServerItems';

Var data = scope.tableData;

/ / установить метод подкачки масштаб.$watch ('pagingOptions', функция () { getPagedDataAsync (scope.pagingOptions.размер страницы, масштаб.pagingOptions.currentPage);}, правда); 

 var getPagedDataAsync = function (pageSize, page) {

 setTimeout(function () {

 var pagedData = data.slice((page - 1) * pageSize, page * pageSize);

 scope.gridData = pagedData;

 scope.totalServerItems = data.length;

 if (!scope.$$phase) {

  scope.$apply();

}

});

};

 getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);

 //update layout of ng-grid
    scope.$watchCollection( "tableData",

    function (newValue, oldValue) {

  getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);

  scope.gridData = newValue;

  }
  );
1 2
angularjs ng-grid

1 ответ:

'use strict'; var demoApp = угловой.модуль ("DemoApp");

DemoApp.контроллер ('simpleController', функция ($scope) {

$scope.persons = [{ name: "Moroni", age: 50 },
                    { name: "Tiancum", age: 43 },
                    { name: "Jacob2", age: 27 },
                    { name: "Jacob3", age: 27 },
                    { name: "Jacob4", age: 27 },
                    { name: "Jacob5", age: 27 },
                    { name: "Jaewrcob6", age: 27 },
                    { name: "Jerwacob", age: 27 },
                    { name: "Jewrewacob", age: 27 },
                    { name: "Tiancum", age: 43 },
                    { name: "Jacob2", age: 27 },
                    { name: "Jacob3", age: 27 },
                    { name: "Jacob4", age: 27 },
                    { name: "Jacob5", age: 27 },
                    { name: "Jaewrcob6", age: 27 },
                    { name: "Jerwacob", age: 27 },
                    { name: "Jewrewacob", age: 27 },
                    { name: "Tiancum", age: 43 },
                    { name: "Jacob2", age: 27 },
                    { name: "Jacob3", age: 27 },
                    { name: "Jacob4", age: 27 },
                    { name: "Jacob5", age: 27 },
                    { name: "Jaewrcob6", age: 27 },
                    { name: "Jerwacob", age: 27 },
                    { name: "Jewrewacob", age: 27 },
                    { name: "Tiancum", age: 43 },
                    { name: "Jacob2", age: 27 },
                    { name: "Jacob3", age: 27 },
                    { name: "Jacob4", age: 27 },
                    { name: "Jacob5", age: 27 },
                    { name: "Jaewrcob6", age: 27 },
                    { name: "Jerwacob", age: 27 },
                    { name: "Jewrewacob", age: 27 },
                    { name: "Tiancum", age: 43 },
                    { name: "Jacob2", age: 27 },
                    { name: "Jacob3", age: 27 },
                    { name: "Jacob4", age: 27 },
                    { name: "Jacob5", age: 27 },
                    { name: "Jaewrcob6", age: 27 },
                    { name: "Jerwacob", age: 27 },
                    { name: "Jewrewacob", age: 27 },

                    { name: "Jacob", age: 27 },
                    { name: "Jacob", age: 27 },
                    { name: "Nephi", age: 29 },
                    { name: "Enos", age: 34 }];

$scope.columnDefs = [{ field: 'name', displayName: 'Name', width: '40%' }
               , { field: 'age', displayName: 'Age', width: '40%' }
               , { field: '', displayName: 'Edit', width: '10%' }
               , { field: '', displayName: 'Delete', width: '10%' }
];

$scope.gridOptions = {
    data: 'persons',
    plugins: [new ngGridFlexibleHeightPlugin()],
    showFooter: false,
    columnDefs: 'columnDefs'
};

});

//директива

DemoApp.директива ('gridDataPager', function () {

return {
    restrict: 'A',
    priority: 1002,
    scope: true,
    //scope: { tableData: '=griddata' },
    compile:
        function (tElement, tAttrs) {
            return {
                pre: function (scope, element, attrs, controller) {

                    scope.options = scope.$eval(attrs.ngGrid);
                    scope.options.gridData = [];

                    //get basic data source name
                    scope.BaseSource = scope.options.data;
                    //get data
                    scope.data = scope.$eval(scope.options.data);
                    scope.options.gridData = scope.data;
                    //Configure Page Option
                    scope.pagingOptions = {
                        pageSizes: [10, 20, 30, 500, 1000, 5000], //page Sizes
                        pageSize: 10, //Size of Paging data
                        currentPage: 1 //what page they are currently on
                    };
                    scope.options.pagingOptions = scope.pagingOptions;
                    scope.options.showFooter = true;
                    scope.options.enablePaging = true;
                    scope.options.totalServerItems = 'totalServerItems';
                    scope.options.data = 'gridData';



                },
                post: function (scope, iElement, iAttrs, controller, transcludeFn) {



                    //set paging watch method
                    scope.$watch('pagingOptions', function () {
                        getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);
                    }, true);
                    var getPagedDataAsync = function (pageSize, page) {
                        setTimeout(function () {
                            var pagedData = scope.data.slice((page - 1) * pageSize, page * pageSize);
                            scope.$parent.gridData = pagedData;
                            scope.$parent.totalServerItems = scope.data.length;
                            if (!scope.$$phase) {
                                scope.$apply();
                            }
                        });
                    };
                    getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);


                    //update layout of ng-grid
                    scope.$watchCollection(
                         scope.BaseSource,
                        function (newValue, oldValue) {
                            scope.data = newValue;
                            getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);
                        }
                    );


                }

            };
        }
}

});

/ / HTML

Див>

0