如何在ng-repeat angularjs es6中设置分页?

时间:2019-05-14 23:56:04

标签: javascript angularjs angular-ui-bootstrap

如何在todo.html视图中设置分页。在我看来,这个地方就是错误$ctrl.todos.slice

todo.html

<li ng-repeat='todo in $ctrl.todos.slice(($ctrl.currentPage- 
   1)*$ctrl.itemsPerPage), 
   (($ctrl.currentPage)*$ctrl.itemsPerPage)) track by $index'>
  <a href='#'>{{todo.name}}</a>
</li>

todos-list.html

 <ul>
        <todo currentPage ='$ctrl.currentPage' 
           itemsPerPage='$ctrl.itemsPerPage' todos="$ctrl.todos"> 
        </todo>
     </ul>

    <h4>Default</h4>
    <ul uib-pagination total-items="$ctrl.totalItems" ng- 
        model="$ctrl.currentPage" class="pagination-sm" items-per- 
        page="$ctrl.itemsPerPage"> 
  </ul>
    <pre>The selected page no: {{$ctrl.currentPage}}</pre>

todos-list.controller.js

class TodosListController {
    constructor($scope, TodosListService) {
      'ngInject'
      this.TodosListService = TodosListService;
      this.currentPage = 1;
      this.itemsPerPage = 5;
      this.totalItems = 0;
}



   this.TodosListService.getTodos(query)
      .then(response => {
          this.todos = response.data;
          console.log(this.todos);
          this.todos = this.todos.todos.items;
          this.totalItems = this.todos.length;

     .catch((err) => {
         console.log(err);
     }); 
    }
  }



export default TodosListController;

todo.component.js

let artistComponent = {
   bindings: {
     artists: '<',
     currentPage: '<',
     itemsPerPage: '<'
  },
   template,
   controller
 };

0 个答案:

没有答案