1

I was working on my ECommerce application and trying to implement angular js in my application.

My current html code without angular is like . Each tr having 4 products.

<table style="border-collapse:collapse;width: 769px">
<tbody>
<tr>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
</tr>
<tr>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
<td style="border:1px Dashed #bfbfbf;width: 192px;">/*Product Details goes here*/</td>
</tr>
...
...
...
</tbody>
</table>

Now when I try to implement angular js and load my products dynamically, I had to write below code

<table style="border-collapse:collapse;width: 769px">
<tr>
<td ng-repeat="product in products" style="border:1px Dashed #bfbfbf;width:192px;colspan="4"";>
<ng-include src="product.FullDescription"></ng-include>
</td>
</tr>
</table>

This ofcourse create single row with all products in single row. Anybody having idea to use ng-repeat so that I can have multiple tr with each tr having 4 tds

Update

this is my controller

angular.module('myApp', [])
.controller('NgProducts', function($scope) {
$scope.products=@Html.Raw(Json.Encode(Model.Products));//Model.products can contain any number of products. 


  // I want to load this every product in single td and also want to have mtliple tr with each tr having 4 tds

});

This link solved my problem

Community
  • 1
  • 1
Nitin Varpe
  • 10,450
  • 6
  • 36
  • 60

1 Answers1

0

use ng-repeat="product in products" on tr

like 

<table style="border-collapse:collapse;width: 769px">
<tr ng-repeat="product in products">
<td  style="border:1px Dashed #bfbfbf;width:192px;colspan="4"";>
<ng-include src="product.FullDescription"></ng-include>
</td>
</tr>
</table>

this is example of my application what i am building:

<tr ng-repeat="alldata in mydata.row | filter:search | orderBy:sortBy:reverse ">
                    <td><div>{{alldata.id | number}}</div></td>
                    <td>{{alldata.name | uppercase}}</td>
                    <td>{{alldata.numbers}}</td>
                        <td><a href="#/edit/{{alldata.id}}" class="btn btn-primary">Edit</a></td>

                </tr>

its look similar to your application.

  • But this code created tr which is having single td in it, I want max 4 td in single row. – Nitin Varpe Sep 19 '14 at 05:21
  • what you have in your product.FullDescription –  Sep 19 '14 at 05:23
  • Actually thats url, I forgot to change that. That url returns view which is loaded into every td – Nitin Varpe Sep 19 '14 at 05:23
  • assume that the "tr" are the product container and the td are the the details . in that case you have to repeat the "tr" and made static "td" for the which contain detail –  Sep 19 '14 at 05:26
  • Actullally my tds are also dynamic with each product from products is loaded in every single td, so even that update wont help. – Nitin Varpe Sep 19 '14 at 05:38
  • how are you getting the data can you update the question with your controller? it might mbe help. –  Sep 19 '14 at 05:39
  • http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap. This solved my issue. – Nitin Varpe Sep 19 '14 at 05:51
  • Thanks for you valuable time @frank. – Nitin Varpe Sep 19 '14 at 06:03