angularjs - Angular js中嵌套对象的分页-6ren

angularjs - Angular js中嵌套对象的分页

转载作者：行者123 更新时间：2023-12-01 01:48:41

25

4

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

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

应用程序.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>

最佳答案

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

自定义过滤器(确定要跳过多少条记录)，以及...

内置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 queueJob 上的属性(property)迭代变量，因为这个 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指令来调用 Controller 函数，增加/减少 queueJob对象的 pageIndex属性(property)。我们还使用 ng-disabled如果用户在第一条/最后一条记录上，则防止导航下一条/上一条的指令。

4) 在 Controller 中创建可绑定(bind)函数

$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

关于angularjs - Angular js中嵌套对象的分页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46274943/

25

4

0

文章推荐： javascript - 使用 JS 将任何标签内的文本复制到剪贴板

文章推荐： r - 在 R (Rglpk?) 中使用线性规划找到所有可能的解决方案

文章推荐： python - 如何将 stringVar() 从 tk 转换为 pyqt

java - 对象 a = 对象 b；对象 a 会发生什么？
我的一位教授给了我们一些考试练习题，其中一个问题类似于下面(伪代码): a.setColor(blue); b.setColor(red); a = b; b.setColor(purple); b
JavaScript 测试(对象 && 对象 !== "null"&& 对象 !== "undefined")
我似乎经常使用这个测试 if( object && object !== "null" && object !== "undefined" ){ doSomething(); } 在对象上，我
C#对象/对象
C# Object/object 是值类型还是引用类型？我检查过它们可以保留引用，但是这个引用不能用于更改对象。 using System; class MyClass { public s
javascript - 通过ajax发送json - 对象 - 对象
我在通过 AJAX 发送 json 时遇到问题。 var data = [{"name": "Will", "surname": "Smith", "age": "40"},{"name": "Wil
javascript - 如何获取值[对象][对象]
当我尝试访问我的 View 中的对象 {{result}} 时(我从 Express js 服务器发送该对象)，它只显示 [object][object]有谁知道如何获取 JSON 格式的值吗？这是
java - 对象...对象[] 和格式
我有不同类型的数据(可能是字符串、整数......)。这是一个简单的例子: public static void main(String[] args) { before("one"); }
javascript - 如何修复[对象，对象]
嗨，我是 json 和 javascript 的新手。我在这个网站找到了使用json数据作为表格的方法。我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
JavaScript [对象][对象] 调试
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
java - 对象==空或空==对象？
我听别人说 null == object 比 object == null check 例如: void m1(Object obj ) { if(null == obj) // Is thi
VBS教程：对象-Match 对象
Match 对象提供了对正则表达式匹配的只读属性的访问。说明 Match 对象只能通过 RegExp 对象的 Execute 方法来创建，该方法实际上返回了 Match 对象的集合。所有的
VBS教程：对象-Class 对象
Class 对象使用 Class 语句创建的对象。提供了对类的各种事件的访问。说明不允许显式地将一个变量声明为 Class 类型。在 VBScript 的上下文中，“类对象”一词指的是用
VBS教程：对象-Folder 对象
Folder 对象提供对文件夹所有属性的访问。说明以下代码举例说明如何获得 Folder 对象并查看它的属性： Function ShowDateCreated(f
VBS教程：对象-File 对象
File 对象提供对文件的所有属性的访问。说明以下代码举例说明如何获得一个 File 对象并查看它的属性： Function ShowDateCreated(fil
VBS教程：对象-Drive 对象
Drive 对象提供对磁盘驱动器或网络共享的属性的访问。说明以下代码举例说明如何使用 Drive 对象访问驱动器的属性： Function ShowFreeSpac
VBS教程：对象-FileSystemObject 对象
FileSystemObject 对象提供对计算机文件系统的访问。说明以下代码举例说明如何使用 FileSystemObject 对象返回一个 TextStream 对象，此对象可以被读
对象
我是 javascript OOP 的新手，我认为这是一个相对基本的问题，但我无法通过搜索网络找到任何帮助。我是否遗漏了什么，或者我只是以错误的方式解决了这个问题？这是我的示例代码: functio
对象
我可以很容易地创造出很多不同的对象。例如像这样: var myObject = { myFunction: function () { return ""; } };
对象
function Person(fname, lname) { this.fname = fname, this.lname = lname, this.getName = function()
javascript - JSON 返回(对象，对象)
任何人都可以向我解释为什么下面的代码给出 (object, Object) 吗？ (console.log(dope) 给出了它应该的内容，但在 JSON.stringify 和 JSON.parse
javascript - 返回 [对象，对象] 的工具提示
我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 lynda.com 的教程后，我一直在尝试确定如何在工具提示中显示特定数据。 This code

首页

博学

6Ren·AI

商城

angularjs - Angular js中嵌套对象的分页