Предисловие
Прежде чем изучать какой -либо язык, должен быть бизнес, чтобы заставить вас узнать его. Конечно, NG не является исключением. Перед изучением NG первая демонстрация, которую я хотел сделать, - это реализовать пейджинг на основе NG. В дополнение к основной вычислительной идее, она заключается в том, чтобы использовать инструкции для инкапсуляции ее в плагин и непосредственно ссылаться на ее на странице списка, которая требует пейджинга.
Плагин
Когда я инкапсулировал плагин пейджинга, я внедрил несколько методов в целом, и я наконец нашел плагин, инкапсулированный другом (http://www.miaoyueyue.com/archives/813.html). Я чувствовал, что это было довольно хорошо, поэтому я прочитал его исходный код и использовал его непосредственно в проекте.
Принципы и инструкции для использования
1. Плагинный исходный код в основном реализуется на основе угловой директивы.
2. Ключевой точкой при вызове является функция обработки фоновых запросов, то есть для получения данных из фона.
3. Плагин имеет два параметра клавиш: CurrentPage, Itemesperpage, текущий номер страницы и номер записи на страницу.
4. После реализации вызова метода нам необходимо повторно повторно обработать фон, чтобы получить соответствующие данные о номере страницы на основе каждого щелчка на номере страницы плагина подключения. В номере страницы я использовал $ watch для мониторинга. Когда я впервые использовал его, я поместил вызову в плагинку, но я обнаружил, что фон будет запускаться два раза каждый раз. Это место требует внимания.
5. Я инкапсулирую фон запроса в сервисный слой, а затем вызываю его в контроллер, который также соответствует идее MVC.
Диаграмма воспроизведения
Позвонить код
<div ng-app = "demoApp" ng-controller = "democontroller"> <table> <thead> <tr> <td> id </td> <td> firstname </td> <td> lastname </td> <td> Состояние </td> <td> </td> </tr> </td> <Ttry> <Ttry> в Persons "> <td> {{emp.id}} </td> <td> {{emp.firstname}} </td> <td> {{emp.lastName}} </td > <td> {{emp.status}} </td> <td> {{emp.address}} </td> </tbody> </table> <tm-pagination conf = "paginationConf"> </tm-cagination> </div> <script type = "text/javascript"> var app = angular.module ('demoApp', ['tm.pagination']); app.controller ('democontroller', ['$ scope', 'BusinessService' function 'function ($ comport warce) {var postdata = {pageIndex: $ scope.paginationConf.currentPage, pagesize: $ scope.paginationConf.itemsperpage} BusinessService.List (postData) .success (function (response) {$ scope.paginationConf.totAlitem response.items;});}//Configure paging basic parameters $scope.paginationConf = {currentPage: 1,itemsPerPage: 5};/****************************************************************************************************************** When the page number and page record number change, Мониторинг фонового запроса. Если контролируется текущая страница и элементы. app.factory ('BusinessService', ['$ http', function ($ http) {var list = function (postdata) {return $ http.post ('/usmentee/getallemployee', postdata);} return {list: function (postdata) {return list (postdata);}}}}}});Приведенный выше контент является примером кода, который редактор вводит вам для реализации функции пейджинга на основе AngularJS. Я надеюсь, что это будет полезно для всех!