angularJS 使用ui-bootstrap的pagination指令分页数据,controller如何写才是最优雅的写法

发布于 2022-09-01 19:28:56 字数 1527 浏览 12 评论 0

<div class="table-responsive">
    <table class="table table-bordered">
      <thead>
      <tr class="active">
        <th>订单号</th>
        <th>项目</th>
        <th>姓名</th>
        <th>手机号</th>
        <th>下单日期</th>
        <th>使用日期</th>
        <th>场次</th>
        <th>金额</th>
        <th>消费方式</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="order in vm.orders">
        <td><a href="">{{order.number}}</a></td>
        <td>足球</td>
        <td>{{order.user.name}}</td>
        <td>{{order.mobile}}</td>
        <td>{{order.created_at}}</td>
        <td>{{order.order_items[0].start_at}}</td>
        <td>
          <ul>
            <li ng-repeat="item in order.order_items">{{item.venue.name}}号场地:{{item.start_at | dateFormat |
              date:'HH:mm'}}-{{item.end_at | dateFormat | date:'HH:mm'}}
            </li>
          </ul>
        </td>
        <td>{{order.payment_price | price}}</td>
        <td>现场订单</td>
      </tr>
      </tbody>
    </table>

    <pagination total-items="vm.totalItems" ng-model="vm.currentPage" ng-change="vm.pageChanged()"
                previous-text="上一页" next-text="下一页" max-size="5"></pagination>
  </div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

雨后彩虹 2022-09-08 19:28:56

求插件Github地址

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文