javascript - Angular Controller 范围

Question

我是 Angular JS 新手，我正在将以下 JSON 绑定(bind)到我的 HTML:

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

我的 HTML 是一个基本上如下所示的表格:

<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 我正在 thead 中生成一列，对于每个 ProductItems 中的每个 Item 我想生成一个行位于 tbody 中，但由于所有产品的循环仅限于 thead，我无法正确绑定(bind) ProductItems。

关于如何克服这个问题有什么建议吗？

Answer 1

你能检查一下吗

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

换成div后就变成这样了。无论如何，您必须对其进行样式设置以提供表格结构

<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>