角度控制器范围答案

【问题标题】：Angular Controller Scope角度控制器范围
【发布时间】：2014-05-30 06:00:18
【问题描述】：

我是 Angular JS 的新手，我正在将 JSON 绑定到我的 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 和Item in ProductItems of each Product 中生成一个列@ 正确。

关于如何克服这个问题的任何建议？

【问题讨论】：

“Foreach Product in Products 我在前面生成一行” - 你的意思是为每个产品创建一列（不是一行）。在您提供的代码中，它为每个产品创建了一个列标题。
@guru 是的，是的。对不起那个错字。
代码中的header列和body列不匹配。您是否想做这样的事情 - plnkr.co/edit/64kByaQ8DYm2wvpTgBeR?p=preview
@guru 是的，没错。类似的东西。我只需要弄清楚范围界定的东西。

标签： javascript angularjs

【解决方案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>

【讨论】：

不，它不起作用。但是，如果我指定索引，那么它就可以工作。 productCtrl.data.Products[0].ProductItems 以及问题。
没有。如 JSON 中所见，Products 将是一个二维数组。
我认为你必须使用 div 而不是表格。

【解决方案2】：

理想情况下，在呈现 tbody 行之前，必须知道任何产品在 json 中可以拥有的最大产品项目数，因为将为产品的每个产品项目创建一行。

查看这个 plunker 示例： http://plnkr.co/edit/Pl6t69ShUje0WLQDWEdU?p=preview

下面给出的渲染示例逻辑。

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

【讨论】：