重复的次数确定ammount的另一个里面NG-重复 [英] Repeating a determined ammount of times inside another ng-repeat
问题描述
在我的SharePoint应用程序，我有一个使用NG重复一个div：
＆LT;！ - 我们称之为格页面 - ＆GT;
＆LT; DIV CLASS =myPageItemNG重复=项中的JSONObject＆GT;
＆LT; DIV CLASS =divStyle＆GT;
＆LT;标签类=内容＆GT; {{jsonObject.User}}＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT;！ - 这是应该被重复这里面3倍的项目 - ＆GT;
＆LT;！ - 我们称之为等页项 - ＆GT;
＆LT;！ - 这必须在每个重复3次，每次页面，有3种不同的名字 - ＆GT;
＆LT; DIV CLASS =itemToBeRepeated＆GT;
＆LT;标签ID =喇嘛＆GT; {{item.name}}＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
和我的JSONObject是这样的：
的JSONObject：
[
【用户：JohnSpartan}，
{一句：SomeData}，
{UserFlag：'1337'}，
{船舶：BSG-75}，
{WeaponList：[{名：1337-B}，{名：Roflcopter}，{名：快变}，{名：theb33f]}
]
因此，每个页的必须包含每一个3的页项的。每个页面都必须有独特的三页的项目，因为这是我们的分页系统中，每个页的是，被公司使用类生成一个独特的网页。
我试过NG-重复启动生成每个页面独特的3 pageItems，但我认为这是不正是我要找的。我可以用C＃在服务器端做，但我正在寻找一个更解决之实践。
我也试过 limitTo ，但我完全不看我怎么使用它在我的处境。
一些已经回答了，但正如我上面说的，我已经尝试过limitTo，它不会在我的情况下工作，因为它会重复同样的3的页项的每个页的
我可以做到这一点与过滤器？ Accordlingy到一些答案，我可以。但我真的想一个非常简单的解决方案。难道角度没有任何可以切开我的对象，而无需滤波器的这样做？
我想我可以解释与预期的结果要好。
其结果可能是这样的：
＆LT; DIV CLASS =myPageItem＆GT;
＆LT; DIV CLASS =divStyle＆GT;
＆LT;标签类=内容＆GT; JohnSpartan＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =itemToBeRepeated＆GT;
＆LT;标签＆gt; 1337-B＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =itemToBeRepeated＆GT;
＆LT;标签＆gt;＆Roflcopter LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =itemToBeRepeated＆GT;
＆LT;标签＆gt;＆Shazam的LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =myPageItem＆GT;
＆LT; DIV CLASS =divStyle＆GT;
＆LT;标签类=内容＆GT; JohnSpartan＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =itemToBeRepeated＆GT;
＆LT;标签＆gt;＆theb33f LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
您需要两个NG-重复。一种迭代的网页和另一迭代的每一页中的项目。可以项目数限制为3。
＆LT; DIV CLASS =myPageItemNG重复= GT，在页面上的页面＆;
＆LT; DIV CLASS =，在page.items项目| limitTo：3，itemToBeRepeatedNG重复=＆GT;
＆LT;标签ID =喇嘛＆GT; {{item.Content}}＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
[更新]你的问题没有提供足够的信息。对于初学者里面是什么item.Content和你想如何把它分解成不同的部分？根据你的问题你code是这样的：
＆LT;！ - 这是应该被重复这里面3倍的项目 - ＆GT;
＆LT;！ - 我们称之为等页项 - ＆GT;
＆LT; DIV CLASS =itemToBeRepeated＆GT;
＆LT;标签ID =喇嘛＆GT; {{item.Content}}＆LT; /标签＆gt;
＆LT; / DIV＆GT;
这将显示每个页面内容一个内容为所有页面的重复。那是因为所有三个你呈现相同item.Content。如果你想他们是不同的，你需要告诉我们更多关于你想要的是里面item.Content以及如何在不同的页面显示。我的胆量告诉我，你是把所有的页面数据，在一个内容这样做不对。你应该切片内容分成多个对象，并在每个div分别呈现每个对象。
我的答案正是意在显示的每一页不同的项目内容。该数据需要paginated.sliced成阵列的多个对象你能在每个div来显示不同的内容。这是如何prepare数据将在每个div不同的：
$ scope.pages =
[
{
项目：
[
{内容：第1页，项目1}，
{内容：第1页，项目2}，
{内容：第1页，项目3'}
]
}，
{
项目：
[
{内容：第2页，项目1}，
{内容：第2页，项目2}，
{内容：第2页，项目3'}
]
}
];
呈现的HTML将是这样的：
＆LT; DIV CLASS =myPageItem＆GT;
＆LT; DIV CLASS =itemToBeRepeated＆GT;
＆LT;标签ID =喇嘛＆GT;第1页，项目1＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =itemToBeRepeated＆GT;
＆LT;标签ID =喇嘛＆GT;第1页，项目2＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =itemToBeRepeated＆GT;
＆LT;标签ID =喇嘛＆GT;第1页，项目3＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =myPageItem＆GT;
＆LT; DIV CLASS =itemToBeRepeated＆GT;
＆LT;标签ID =喇嘛＆GT;第2页，项目1＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =itemToBeRepeated＆GT;
＆LT;标签ID =喇嘛＆GT;第2页，项目2＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =itemToBeRepeated＆GT;
＆LT;标签ID =喇嘛＆GT;第2页，项目3＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
In my sharepoint application, I have a div that is using an ng repeat:
<!-- 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>
And my JsonObject would look like this:
jsonObject:
[
{ User : 'JohnSpartan' },
{ SomeThing : 'SomeData' },
{ UserFlag : '1337' },
{ Ship : 'BSG-75' },
{ WeaponList : [{"name":"1337-b"},{"name":"Roflcopter"},{"name":"Shazam"},{"name":"theb33f"]}
]
So, each page have to contain each one 3 page items. Each page has to have unique 3 page items, because this is used at our pagination system, and each page is a unique page that's being generated using that class.
I tried ng-repeat-start to generate for each page unique 3 pageItems, but I think it's not exactly what I'm looking for. I could do it with C# on server side, but I'm looking for a more pratical solution. I tried also limitTo, but I don't exactly see how can I use it in my situation.
Some have already answered, but as I said above, I already tried limitTo, and it does not work in my case, as it will repeat the same 3 page items for each page.
Can I do that with filters? Accordlingy to some answers, I can. But I really wanted a really simple solution. Does angular don't have anything that can slice my object, without needing of a filter to do so?
I guess I can explain better with the expected result. The result could be something like this:
<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>
You need two ng-repeats. One iterates the pages and the other one iterates the items for each page. You can limit the number of items to 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>
[UPDATE] Your question is not providing enough information. For starters what is inside item.Content and how do you want to break it into different pieces? According to your question your code looks like this:
<!-- 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>
This will show one content per page content for all repetitions of pages. that is because for all three you are showing the same item.Content. If you want them to be different you need to tell us more about what is inside item.Content and how do you want to show in different pages. My guts tell me that you are doing this wrong by putting all of the page data in one Content. You should slice the content into multiple objects and render each object separately in each div.
My answer was exactly meant to show different item content for each page. The data needs to be paginated.sliced into multiple objects in array for you to be able to show distinct contents in each div. This is how to prepare the data to be different in each div:
$scope.pages =
[
{
items:
[
{ Content: 'Page1-Item1' },
{ Content: 'Page1-Item2' },
{ Content: 'Page1-Item3' }
]
},
{
items:
[
{ Content: 'Page2-Item1'},
{ Content: 'Page2-Item2'},
{ Content: 'Page2-Item3'}
]
}
];
The rendered Html will be something like this:
<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>
这篇关于重复的次数确定ammount的另一个里面NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
