Question

我开始使用angular，我有一个嵌套对象，我想分页。要分页的项目是给定对象中的一些“属性”。 queuelist对象与数组中的数组嵌套。任何帮助，将不胜感激。非分页数据的plunker链接是：

https://plnkr.co/edit/zgo0msd6y5ba6DJ6qGlc?p=preview

app.js：

var app = angular.module("myApp",[])
                 .controller("mycontroller",['$scope',function($scope){

  $scope.queuelist = [
  {
    "name": "ONE",
    "QueueList": [
      {
        "id": 1,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:64"
      },
      {
        "id": 2,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:65"
      },
      {
        "id": 3,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:66"
      }
    ],
    "$$hashKey": "object:59"
  },
  {
    "name": "TWO",
    "QueueList": [
      {
        "id": 4,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:72"
      },
      {
        "id": 5,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:73"
      },
      {
        "id": 6,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:74"
      },
      {
        "id": 7,
        "attributes": {
          "a": 1,
          "b": "2017-07-25T12:57:06Z",
          "c": 1500967626000,
          "d": "asdasd",
          "e": "aasdasdasd",
          "f": 0
        },
        "$$hashKey": "object:75"
      }
    ],
    "$$hashKey": "object:60"
  }
];


  $scope.objects = [];


   /*                  
  for(i=0;i<$scope.data.length;i++){
      $scope.data2.push($scope.data[i].QueueList);
  };
   */

    for(i=0;i<$scope.queuelist.length;i++){
      for(j=0;j<$scope.queuelist[i].QueueList.length;j++){
          $scope.objects.push($scope.queuelist[i].QueueList[j].attributes);
      };
    };              
   }])

和index.html：

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script type= "text/javascript" src= "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
        <script type= "text/javascript" src= "app.js"></script>
        <style>
            table, td, th {    
            border: 1px solid #ddd;
            text-align: left;
            }

            table {
            border-collapse: collapse;
            width: 100%;
            }

            th, td {
            padding: 15px;
            }
        </style>
    </head>
    <body>
        <div ng-controller="mycontroller">

            <div ng-repeat="queueJob in queuelist">
                {{queueJob.name}}
                <table>
                    <thead>
                        <tr>
                            <th><b>a</b></th>
                            <th><b>b</b></th>
                            <th><b>c</b></th>
                            <th><b>e</b></th>
                            <th><b>f</b></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="queue in queueJob.QueueList">
                            <td>{{queue.attributes.a}}</td>
                            <td>{{queue.attributes.b}}</td>
                            <td>{{queue.attributes.c}}</td>
                            <td>{{queue.attributes.e}}</td>
                            <td>{{queue.attributes.f}}</td>
                        </tr>
                        <br/><br/>
                    </tbody>
                </table>
                <br/><br/>
                <br/><br/>
            </div>

        </div>
    </body>
</html>

Answer 1

您可以使用以下组合执行此操作：

自定义过滤器（用于确定要跳过的记录数）和...
内置limitTo过滤器（将记录数限制为所需的页面大小）

1）首先创建自定义过滤器。

app.filter("startFrom", function thisFilter() {
  return function(input, index) {
    return input.slice(parseInt(index));
  };
});

过滤器接收index，然后继续使用Array.prototype.slice()方法。 slice()方法在给定索引处对数组进行切片，并返回包含所有剩余对象的新数组。过滤器返回新数组。

2）在ng-repeat指令中使用自定义过滤器和内置limitTo过滤器。

<tr ng-repeat="queue in queueJob.QueueList | startFrom: queueJob.pageIndex | limitTo: 1">

在这里，我们使用新创建的startFrom自定义过滤器，将queueJob.pageIndex属性作为过滤器的index参数传递给它。我们将startFrom过滤器的结果传递到limitTo过滤器，从而将记录数量减少到1。

注意：我们必须使用pageIndex itteration变量上的queueJob属性，因为此ng-repeat包含在另一个ng-repeat内，因此$scope.pageIndex变量会发生冲突并随后被覆盖。

3）创建下一个和上一个按钮

<tr>
  <td colspan="5">
    <button class="btn" 
      ng-click="onPrevClicked(queueJob)"
      ng-disabled="isFirst(queueJob)">
      <span class="fa fa-chevron-left"></span>
      Prev
    </button>
    <button class="btn" 
      ng-click="onNextClicked(queueJob)"
      ng-disabled="isLast(queueJob)">
      Next
      <span class="fa fa-chevron-right"></span>
    </button>
    Page {{ queueJob.pageIndex + 1 }}
  </td>
</tr>

这里我们使用ng-click指令来调用增加/减少queueJob对象的pageIndex属性的控制器函数。如果用户在第一个/最后一个记录上，我们还使用ng-disabled指令来阻止导航next / previous。

4）在控制器中创建可绑定函数

$scope.onPrevClicked = onPrevClicked;
$scope.onNextClicked = onNextClicked;
$scope.isFirst = isFirst;
$scope.isLast = isLast;

function onPrevClicked(obj) {
  if (!isFirst(obj)) obj.pageIndex--;
}

function onNextClicked(obj) {
  if (!isLast(obj)) obj.pageIndex++;
}

function isFirst(obj) {
  return obj.pageIndex === 0;
}

function isLast(obj) {
  return obj.pageIndex + 1 === obj.QueueList.length;
}

5）预先初始化pageIndex媒体资源

$scope.queuelist.forEach(function(obj) {
  obj.pageIndex = 0;
});

这会将pageIndex初始化为一个可以递增并随后递减的数字。

<强>演示

CodePen: Using a custom filter to do pagination

角度js中嵌套对象的分页

1 个答案: