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?

"Foreach Product in Products I am generating a row in thead" - did you mean for each product a column is created (Not a row). In the code you have provided its creating a column header for each product. — guru
– guru, Commented May 30, 2014 at 6:10
The header columns and body columns do not match in the code. Are you looking to do some thing like this - plnkr.co/edit/64kByaQ8DYm2wvpTgBeR?p=preview — guru
– guru, Commented May 30, 2014 at 6:30
@guru Yeah, exactly. Something like that. I just need to figure out the scoping stuff. — lbrahim
– lbrahim, Commented May 30, 2014 at 6:35

Kapil gopinath · Accepted Answer · 2014-05-30 07:27:15Z

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>

edited May 30, 2014 at 7:27

answered May 30, 2014 at 6:30

Kapil gopinath

1,0431 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lbrahim Over a year ago

No, it does not work. But if I specify the index then it works. productCtrl.data.Products[0].ProductItems and thus the question.

lbrahim Over a year ago

No. As seen on the JSON Products will be a 2 dimensional array.

Kapil gopinath Over a year ago

I think you have to use div instead of tables.

guru · Accepted Answer · 2014-05-30 07:17:15Z

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>

Collectives™ on Stack Overflow

Angular Controller Scope

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related