Question

在我的sharepoint应用程序中，我有一个使用ng repeat的div：

<!-- Let's call this div "page" -->
<div class="myPageItem" ng-repeat="item in jsonObject">
    <div class="divStyle">
        <label class="content">{{jsonObject.User}}</label>
    </div>
    <!-- This is the item that is supposed to be repeated 3 times inside here -->
    <!-- Let's call this other "page item" -->
    <!-- this must be repeated 3 times for each page, with 3 different names on each one -->
    <div class="itemToBeRepeated>
       <label id="bla">{{item.name}}</label>
    </div>
</div>

我的JsonObject看起来像这样：

jsonObject:
[ 
  { User       : 'JohnSpartan' },
  { SomeThing  : 'SomeData'    },
  { UserFlag   : '1337'        },
  { Ship       : 'BSG-75'      },
  { WeaponList : [{"name":"1337-b"},{"name":"Roflcopter"},{"name":"Shazam"},{"name":"theb33f"]}
]

因此，每个页面必须包含每个页面项目。每个页面必须有唯一的3页面项目，因为这在我们的分页系统中使用，每个页面是使用该类生成的唯一页面。

我尝试了ng-repeat-start为每个页面生成唯一的3个pageItems，但我认为这并不是我正在寻找的。我可以在服务器端用C＃做，但我正在寻找一个更实用的解决方案。我也尝试了limitTo，但我不确切地知道如何在我的情况下使用它。

有些人已经回答了，但正如我上面所说，我已经尝试过limitTo，但在我的情况下它不起作用，因为它将为每个页面重复相同的3 页面项

我可以使用过滤器吗？根据一些答案，我可以。但我真的想要一个非常简单的解决方案。角度没有任何可以切割我的对象的东西，而不需要过滤器吗？

我想我可以用预期的结果更好地解释。结果可能是这样的：

<div class="myPageItem">
    <div class="divStyle">
         <label class="content">JohnSpartan</label>
    </div>
    <div class="itemToBeRepeated>
        <label>1337-b</label>
    </div>
    <div class="itemToBeRepeated>
        <label>Roflcopter</label>
    </div>
    <div class="itemToBeRepeated>
        <label>Shazam</label>
    </div>
</div>
<div class="myPageItem">
    <div class="divStyle">
         <label class="content">JohnSpartan</label>
    </div>
    <div class="itemToBeRepeated>
        <label>theb33f</label>
    </div>
</div>

Answer 1

我认为您正在寻找的是已经存在于角度

中的limitTo过滤器

<div ng-repeat="item in itemToBeRepeated | limitTo: 3">

https://docs.angularjs.org/api/ng/filter/limitTo

Answer 2

基本上你应该将数据准备到控制器中，然后视图将显示控制器准备的内容。这是一个很好的做法

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.items = 
  [
  {"subItems":[{"name":"a"},{"name":"b"},{"name":"c"}]},
  {"subItems":[{"name":"d"},{"name":"e"},{"name":"f"}]},
  {"subItems":[{"name":"g"},{"name":"h"},{"name":"i"}]},
  ]
});

和html（查看）部分

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS: Inline Edit</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">

  <div class="myPageItem" ng-repeat="item in items">
    <!-- This is the item that is supposed to be repeated 3 times inside here -->

    <div class="itemToBeRepeated" ng-repeat="subItem in item.subItems">
       <label id="bla">{{subItem.name}}</label>
    </div>
</div>

</body>
</html>

http://plnkr.co/edit/v6mYosIAAvbmBOlr1flV?p=preview

Answer 3

也许你可以尝试类似的东西：

<div class="myPageItem" ng-repeat="item in items track by $index">
    <!-- This is the item that is supposed to be repeated 3 times inside here -->
    <div class="itemToBeRepeated" ng-show="$index < 3">
       <label id="bla">{{item.Content}}</label>
    </div>
</div>

但我认为你最好使用切片项数组的过滤器。

Answer 4

您需要两次ng重复。一个迭代页面，另一个迭代每个页面的项目。您可以将项目数限制为3。

<div class="myPageItem" ng-repeat="page in pages">
    <div class="itemToBeRepeated" ng-repeat="item in page.items | limitTo: 3">
       <label id="bla">{{item.Content}}</label>
    </div>
</div>

[更新]您的问题没有提供足够的信息。对于初学者来说，item内部是什么。内容以及你想如何将它分成不同的部分？根据您的问题，您的代码如下所示：

<!-- This is the item that is supposed to be repeated 3 times inside here -->
<!-- Let's call this other "page item" -->
<div class="itemToBeRepeated>
   <label id="bla">{{item.Content}}</label>
</div>

这将显示所有重复页面的每页内容一个内容。这是因为对于所有三个你显示相同的项目。内容。如果您希望它们不同，您需要告诉我们更多关于item内部的内容。内容以及您希望如何在不同的页面中显示。我的胆量通过将所有页面数据放在一个内容中告诉我你做错了。您应该将内容切片为多个对象，并在每个div中单独渲染每个对象。

我的回答恰恰是为每个页面显示不同的项目内容。需要对数据进行分页。将数据分成多个对象，以便您能够在每个div中显示不同的内容。这是如何准备每个div中的数据不同：

$scope.pages = 
[
  {
    items:
    [ 
      { Content: 'Page1-Item1' },
      { Content: 'Page1-Item2' },
      { Content: 'Page1-Item3' }
    ]
  },
  {
    items:
    [ 
      { Content: 'Page2-Item1'},
      { Content: 'Page2-Item2'},
      { Content: 'Page2-Item3'}
    ]
  }
];

渲染的Html将是这样的：

<div class="myPageItem">
    <div class="itemToBeRepeated">
       <label id="bla">Page1-Item1</label>
    </div>
    <div class="itemToBeRepeated">
       <label id="bla">Page1-Item2</label>
    </div>
    <div class="itemToBeRepeated">
       <label id="bla">Page1-Item3</label>
    </div>
</div>
<div class="myPageItem">
    <div class="itemToBeRepeated">
       <label id="bla">Page2-Item1</label>
    </div>
    <div class="itemToBeRepeated">
       <label id="bla">Page2-Item2</label>
    </div>
    <div class="itemToBeRepeated">
       <label id="bla">Page2-Item3</label>
    </div>
</div>

在另一个ng-repeat中重复确定的次数

4 个答案: