diff --git a/README.md b/README.md index cb0abef..aa66350 100644 --- a/README.md +++ b/README.md @@ -71,19 +71,19 @@ angular.module('myApp', [require('angular-material-data-table')]); angular.module('demoApp').controller('sampleController', ['$nutrition', '$scope', function ($nutrition, $scope) { 'use strict'; - + $scope.selected = []; - + $scope.query = { order: 'name', limit: 5, page: 1 }; - + function success(desserts) { $scope.desserts = desserts; } - + $scope.getDesserts = function () { $scope.promise = $nutrition.desserts.get($scope.query, success).$promise; }; @@ -205,14 +205,14 @@ $scope.editComment = function (event, dessert) { // if auto selection is enabled you will want to stop the event // from propagating and selecting the row event.stopPropagation(); - - /* + + /* * messages is commented out because there is a bug currently * with ngRepeat and ngMessages were the messages are always * displayed even if the error property on the ngModelController * is not set, I've included it anyway so you get the idea */ - + var promise = $mdEditDialog.small({ // messages: { // test: 'I don\'t like tests!' @@ -376,6 +376,7 @@ You may use Angular's [number](https://docs.angularjs.org/api/ng/filter/number) | `mdOnPaginate` | `function` | A callback function for when the page or limit changes. The page is passed as the first argument and the limit is passed as the second argument. | | `mdPage` | `integer` | Page number. Pages are not zero indexed. The directive assumes the first page is one. | | `mdPageSelect` | `[expression]` | Display a select dropdown for the page number | +| `mdPageInput` | `[expression]` | Display a number input field for the page number | | `mdTotal` | `integer` | Total number of items. | | `ngDisabled` | `[expression]` | Disable pagination elements. | diff --git a/app/index.html b/app/index.html index 529b0d3..bc0689b 100644 --- a/app/index.html +++ b/app/index.html @@ -36,6 +36,7 @@ Pagination Boundary Links Pagination Limit Select Pagination Page Select + Pagination Page Input @@ -53,4 +54,4 @@ - \ No newline at end of file + diff --git a/app/scripts/nutritionController.js b/app/scripts/nutritionController.js index 7f881cc..9e25404 100644 --- a/app/scripts/nutritionController.js +++ b/app/scripts/nutritionController.js @@ -9,7 +9,8 @@ angular.module('nutritionApp').controller('nutritionController', ['$http', '$mdE largeEditDialog: false, boundaryLinks: false, limitSelect: true, - pageSelect: true + pageSelect: true, + pageInput: false }; $scope.selected = []; @@ -180,4 +181,4 @@ angular.module('nutritionApp').controller('nutritionController', ['$http', '$mdE }, 2000); }; -}]); \ No newline at end of file +}]); diff --git a/app/templates/nutrition-table.html b/app/templates/nutrition-table.html index 58060cd..484838f 100644 --- a/app/templates/nutrition-table.html +++ b/app/templates/nutrition-table.html @@ -74,4 +74,4 @@ - \ No newline at end of file + diff --git a/src/scripts/mdTablePagination.js b/src/scripts/mdTablePagination.js index e663ecf..785e075 100644 --- a/src/scripts/mdTablePagination.js +++ b/src/scripts/mdTablePagination.js @@ -82,6 +82,10 @@ function mdTablePagination() { return $attrs.mdPageSelect === '' || self.pageSelect; }; + self.showPageInput = function () { + return $attrs.mdPageInput === '' || self.pageInput; + }; + $scope.$watch('$pagination.limit', function (newValue, oldValue) { if(isNaN(newValue) || isNaN(oldValue) || newValue === oldValue) { return; @@ -116,6 +120,7 @@ function mdTablePagination() { limit: '=mdLimit', page: '=mdPage', pageSelect: '=?mdPageSelect', + pageInput: '=?mdPageInput', onPaginate: '=?mdOnPaginate', limitOptions: '=?mdLimitOptions', total: '@mdTotal' @@ -127,4 +132,4 @@ function mdTablePagination() { scope: {}, templateUrl: 'md-table-pagination.html' }; -} \ No newline at end of file +} diff --git a/src/styles/md-table-pagination.less b/src/styles/md-table-pagination.less index 3ab1ff5..35f8061 100644 --- a/src/styles/md-table-pagination.less +++ b/src/styles/md-table-pagination.less @@ -33,6 +33,18 @@ } } + md-input-container { + justify-content: flex-end; + min-width: 30px; + height: 28px; + input { + color: @md-dark-secondary; + height: 24px; + min-width: 32px; + text-align: right; + } + } + > * { display: flex; align-items: center; @@ -55,4 +67,4 @@ margin-left: 20px; } } -} \ No newline at end of file +} diff --git a/src/templates/md-table-pagination.html b/src/templates/md-table-pagination.html index 88319ec..3888ee2 100644 --- a/src/templates/md-table-pagination.html +++ b/src/templates/md-table-pagination.html @@ -8,6 +8,14 @@ +
+
{{$pagination.label.page}}
+ + + + +
+
{{$pagination.label.rowsPerPage}}
@@ -34,4 +42,4 @@ -
\ No newline at end of file +