Angular Controller Scope

Question

I am new to Angular JS and I am binding following JSON to my HTML:

{
    "CompanyName": "Company Ltd.",
    "Products": [
        {
            "ProductId": 1245,
            "Name": "Trial",
            "ProductItems": [
                {
                    "ProductId": 1254,
                    "ProductItemName": "Service 1",
                    "ProductItemType": "Service"
                },
                {
                    "ProductId": 7789,
                    "ProductItemName": "Service 2",
                    "ProductItemType": "Service"
                }
            ]
        }
    ]
}

My HTML is a table basically like following:

<table ng-controller="ProductController as productCtrl">
    <thead>
        <tr>
            <th id="CompanyName">
                <h1 class="h1">{{productCtrl.data.CompanyName}}</h1>
            </th>
            <th ng-repeat="product in productCtrl.data.Products">                        
                <h2>{{product.Name}}</h2>
                <h3>
                    <span>{{product.ProductPrice}}</span>
                    <span> {{product.CurrencySymbol}} / {{product.PriceTimePeriod}} </span>
                </h3>
            </th>
        </tr>
    </thead>
    <tbody>
        <!--  Need `product` here so that I can loop on their ProductItems -->
        <tr ng-repeat="item in product.ProductItems">
            <td>{{item.ProductItemName}}</td>
            <td>{{item.Amount}}</td>
        </tr>
    </tbody>
    <tfoot>                
    </tfoot>
</table>

Foreach Product in Products I am generating a column in thead and for each of Item in ProductItems of each Product I want to generate a row in tbody but since loop over all products is limited to thead I cannot bind ProductItems properly.

Any suggestion as how to overcome this?

Answer 1

Can you check this

<tr ng-repeat="item in productCtrl.data.Products.ProductItems">
            <td>{{item.ProductItemName}}</td>
            <td>{{item.Amount}}</td>
</tr>

When replaced to div it will be like this. Anyway you will have to style it to give a table structure

<div ng-controller="ProductController as productCtrl">

        <div id="CompanyName">
            <h1 class="h1">{{productCtrl.data.CompanyName}}</h1>
        </div>
        <div ng-repeat="product in productCtrl.data.Products">                        
            <h2>{{product.Name}}</h2>
            <h3>
                <span>{{product.ProductPrice}}</span>
                <span> {{product.CurrencySymbol}} / {{product.PriceTimePeriod}} </span>
            </h3>
        </div>
        <!--  Need `product` here so that I can loop on their ProductItems -->
        <div ng-repeat="item in product.ProductItems">
            <span>{{item.ProductItemName}}</span>
            <span>{{item.Amount}}</span>
        </div>
    </div>

Answer 2

Ideally the maximum product items count any product can have in the json has to be known before rendering the tbody rows, as a row will be created for each productitem of a product.

Check out this plunker sample: http://plnkr.co/edit/Pl6t69ShUje0WLQDWEdU?p=preview

The sample logic for rendering given below.

<table ng-controller="tblCntrl" class="table">
      <thead>
        <tr>
          <th colspan="2" ng-repeat="product in json.Products">{{product.Name}}</th>
        </tr>
        <tr>
          <th ng-repeat-start="product in json.Products">Item name</th>
          <th ng-repeat-end>Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items">
          <td ng-repeat-start="product in json.Products">{{product.ProductItems[$parent.$index].ProductItemName}}</td>
          <td ng-repeat-end>{{product.ProductItems[$parent.$index].amount}}</td>
        </tr>
      </tbody>
    </table>