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

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -