angularjs - Grouping ng-repeat Items into sets to populate table with set number of records per row -
i converting mvc angularjs. have model passed view , take model , used linq group set of 4 items. so, if have 12 records, 3 sets of 4 records. reason. insert 4 records per row in table. here mvc code
@foreach (var productgroup in ((model.select((e, i) => new { product = e, grouping = (i / 4) }).groupby(e => e.grouping)) { <tr> @foreach (var product in productgroup) { <td> <div><br /></div> <img src=@product.product.thumbnail style="width: 200px; height: 200px" /> <div><br /></div> <div class="col-md-6"> <p><strong>@product.product.descriptionline1<br></strong></p> <p><small>@product.product.descriptionline2<br></small></p> </div> </td> } </tr> } so far in angularjs, converted code
<tr ng-repeat="item in listitems"> <td> <img ng-src="{{item.thumbnail}}" style="width: 100px; height: 100px"/> <div><br/> </div> <div small> <span ng-bind="item.descriptionline1"></span><br/> <span ng-bind="item.descriptionline2"></span><br> <br> </div> </td> </tr> how use linq group sets of 4 listitems? if can't use linq, how else can perform grouping? thanks.
here small example displays 4 records per row.however please note there can better approach , sure experts enlighten that.
i have assumed have $scope.items = ['a', 'b', 'c', 'd','e','f','g','k','k','l','k']; simplicity don't know real structure.you can modify accordingly.
now can use angular $index limit 4 records each row this.this way break on 4th record each time on loop.
<div ng-repeat="_ in items"> <span ng-show="($parent.$index % 4 == 0) && ($parent.$index + 4 > $index) && ($parent.$index <= $index)" ng-repeat="item in items"> <span ng-show="1"> {{item}} </span> </span> </div> here jsfiddle example on same.
Comments
Post a Comment