Repeating A Determined Ammount Of Times Inside Another Ng-repeat
Solution 1:
I think what you're looking for is limitTo filter that already exists in angular
<div ng-repeat="item in itemToBeRepeated | limitTo: 3">
Solution 2:
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.
<divclass="myPageItem"ng-repeat="page in pages"><divclass="itemToBeRepeated"ng-repeat="item in page.items | limitTo: 3"><labelid="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" --><divclass="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:
<divclass="myPageItem"><divclass="itemToBeRepeated"><labelid="bla">Page1-Item1</label></div><divclass="itemToBeRepeated"><labelid="bla">Page1-Item2</label></div><divclass="itemToBeRepeated"><labelid="bla">Page1-Item3</label></div></div><divclass="myPageItem"><divclass="itemToBeRepeated"><labelid="bla">Page2-Item1</label></div><divclass="itemToBeRepeated"><labelid="bla">Page2-Item2</label></div><divclass="itemToBeRepeated"><labelid="bla">Page2-Item3</label></div></div>Solution 3:
Basically you should be preparing the data into a controller, then the view will be displaying what the controller prepared. This is the good practice
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"}]},
]
});
And the html (view) part
<!doctype html><htmlng-app="plunker" ><head><metacharset="utf-8"><title>AngularJS: Inline Edit</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script><scriptsrc="app.js"></script></head><bodyng-controller="MainCtrl"><divclass="myPageItem"ng-repeat="item in items"><!-- This is the item that is supposed to be repeated 3 times inside here --><divclass="itemToBeRepeated"ng-repeat="subItem in item.subItems"><labelid="bla">{{subItem.name}}</label></div></div></body></html>Solution 4:
Maybe you could try something like :
<divclass="myPageItem"ng-repeat="item in items track by $index"><!-- This is the item that is supposed to be repeated 3 times inside here --><divclass="itemToBeRepeated"ng-show="$index < 3"><labelid="bla">{{item.Content}}</label></div></div>But I think you would be better to use a filter that slices the items array.
Post a Comment for "Repeating A Determined Ammount Of Times Inside Another Ng-repeat"