Angularjs 将角度引导ui分页连接到表

我正在创建的表上设置角度分页

我已经看完了这些文件。但是，我没有看到如何将分页连接到表。我的分页大小与数组大小匹配。它们的按钮链接数量与页面长度相符。然而，我的表仍然是完整的，这使得我无法测试分页

这是我的桌子

     <tbody>
                <tr ng-repeat="drink in editableDrinkList | orderBy:'-date'"> 
                    <td>[[drink.name]]</td>
                    <td>[[drink.date |date: format :timezone]]</td>
                    <td>[[drink.caffeineLevel]]</td>
                    <td>
                        <a ng-click="delete(drink._id)">
                            <i style="font-size:18px; margin-right:5%" class="fa fa-times"></i>
                        </a>

                        <a href="" ng-click="update(drink)">
                            <i style="font-size:22px;" class="fa fa-pencil-square-o"></i>
                        </a>
                    </td>
                </tr>
     </tbody>

[[drink.name]]
[[drink.date | date:格式：时区]]
[[drink.caffinelevel]]

我已将我的表体设置在表标记的外部，我尝试将其设置在内部，但我的分页控件没有出现

这是我的页码

<pagination  
        total-items="totalItems" 
        ng-model="currentPage" 
        items-per-page="itemsPerPage" 
        ng-change="pageChanged()" 
        ng-click="setPage(currentPage)">
</pagination>

我还设置了一个p标记，以确保选项卡有响应

项目总数[[totalItems]]

itemsPerPage[[itemsPerPage]]

当前页[[currentPage]]

段落中的总项目、每页项目和当前页面都会响应分页控制器上的每次单击。然而，这个表格并没有改变

这是我的控制器

var editabledrinkSet = function(){
      editableArray = [];

      DrinkLibrary.getAllDrinks().success(function(data){
        for (var i = 0; i < data.length; i++) {
          if(data[i].editable) {
            editableArray.push(data[i])
          };
        };
        $scope.currentPage = 1;
        $scope.totalItems = editableArray.length;

        $scope.itemsPerPage =10;
        $scope.maxSize = 3;

        $scope.setPage = function(pageNo) {
          $scope.currentPage = pageNo;
        }
        $scope.pageChanged = function() {
          $log.log('Page changed to: ' + $scope.currentPage);
        };

        $scope.editableDrinkList = editableArray;
      });
    }; 

var-editabledrinkSet=function（）{
editableArray=[]；
DrinkLibrary.GetAllDrinds（）.success（函数（数据）{
对于（变量i=0；i

---

当我让它工作时，我将把它的大部分转移到指令中。我只想先把它设置好。

你可以用一个自定义过滤器来完成

将自定义筛选器添加到ngRepeat

您需要能够告诉repeat哪个索引是每个页面的起点，以及页面上要包含多少项。您可以通过创建一个简单的过滤器（我称之为页面）来实现这一点。此筛选器将使用控制器中已设置的currentPage和itemsPerPage值

<tr ng-repeat="drink in editableDrinkList | orderBy:'-date' | pages: currentPage : itemsPerPage"> 

将分页指令添加到页面

这是您将添加到html中的指令的清理版本请勿在分页指令上使用ngClick或ngChange。ngModel设置为currentPage变量，因此无需执行其他操作。由于currentPage是通过ngModel进行双向绑定的，因此当它更改时，pagination指令和pages过滤器都将更新，而pages过滤器又将更新重复的表行

<pagination  
    total-items="totalItems" 
    ng-model="currentPage" 
    items-per-page="itemsPerPage"
    max-size="maxSize">
</pagination>

就这么简单。如果你想看到一个工作演示，检查Plunker

---

谢谢你。我正在阅读angular Pro，他们正在以非常相似的方式设置过滤器。我真想知道你怎么能按日期对数组排序。我使用的是自定义筛选器orderBy:“-date”，但它不是按日期排序。如果日期是字符串，则必须将其转换为日期才能进行排序。您可以在添加到控制器的谓词函数中执行此操作，例如：

$scope.mydate=function（input）{var date=new date（input.strDt）；return date；}

然后将其（作为mydate）传递到html中的orderBy筛选器，如：

orderBy:mydate

。当你读完这本书时，想知道你是否喜欢它。

app.filter('pages', function() {
  return function(input, currentPage, pageSize) {
    //check if there is an array to work with so you don't get an error on the first digest
    if(angular.isArray(input)) {
      //arrays are 0-base, so subtract 1 from the currentPage value to calculate the slice start
      var start = (currentPage-1)*pageSize;
      //slice extracts up to, but not including, the element indexed at the end parameter,
      //so just multiply the currentPage by the pageSize to get the end parameter
      var end = currentPage*pageSize;
      return input.slice(start, end);
    }
  };
});

<pagination  
    total-items="totalItems" 
    ng-model="currentPage" 
    items-per-page="itemsPerPage"
    max-size="maxSize">
</pagination>