Angularjs - 使用 ng-repeat 格式化表格，其中列没有任何数据答案

【问题标题】：Angularjs - formatting a table with ng-repeat where a column does not have any dataAngularjs - 使用 ng-repeat 格式化表格，其中列没有任何数据
【发布时间】：2016-11-30 10:25:44
【问题描述】：

我有一个表格，如 plunkr 示例所示。

https://plnkr.co/edit/8KK9JdlBqOYX78ywmLYN?p=preview

在这种情况下，控制器中的 $scope.siteData 中不存在 'east' 或 'west' 的数据，但存在 'north'、'south' 和 'central' 的数据。

'central' 的数据显示在 'east' 下

当 ng-repeat 没有任何数据时，如何在 'east' 和 'west' 下显示空列。

这是我的html

<div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>                 
                            <tr>
                                <th >Month</th>
                                <th >North</th>
                                <th >South</th>
                                <th >East</th>
                                <th >West</th>
                                <th >Central</th>
                                <th >Total</th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="items in siteData" >
                            <tr  >
                                <td>
                                    {{items.monthYear | date:'MMMM - yyyy' }}
                                </td>
                                <td ng-repeat="region in items.regions | filter: {regionName: 'North'}">
                                    {{region.capacity.allocated }} / {{region.capacity.capacity}}
                                </td>
                                <td ng-repeat="region in items.regions | filter: {regionName: 'South'}">
                                    {{region.capacity.allocated }} / {{region.capacity.capacity}}                               
                                </td>
                                <td ng-repeat="region in items.regions | filter: {regionName: 'East'}">
                                    {{region.capacity.allocated }} / {{region.capacity.capacity}}
                                </td>
                                <td ng-repeat="region in items.regions | filter: {regionName: 'West'}">
                                    {{region.capacity.allocated}} / {{region.capacity.capacity}}
                                </td>
                                <td ng-repeat="region in items.regions | filter: {regionName: 'Central'}">
                                    {{region.capacity.allocated}} / {{region.capacity.capacity}}
                                </td>                                   
                            </tr>                                               
                        </tbody>
                    </table>
                </div>
            </div>

对于含糊的标题和描述，我们深表歉意。我不太会说话。

【问题讨论】：

你为什么使用 ng-repeat？您预计会有多个北部地区吗？看来您只使用 ng-repeat 所以您可以使用过滤器。如果是这样，有一种更简单的方法可以做到这一点。让我知道，我会尝试进一步解释。

标签： angularjs angularjs-ng-repeat

【解决方案1】：

我希望使用过滤器功能比使用大量 ngRepeats 更有效。

可以给控制器添加数据匹配功能：

$scope.findData = function(data, filter) {

    record = data.regions.filter(function(v, i){
        if(v.regionName === filter) return true;
    }); // returns an array of matches

    // get first item in array if exists else return empty string
    return (record.length > 0) ? record[0].capacity.allocated + ' / ' + record[0].capacity.capacity : '';
};

然后将您的 HTML 替换为：

<td>
   {{ findData(items, 'North') }}
</td>
<td>
   {{ findData(items, 'South') }}
</td>
<td>
   {{ findData(items, 'East') }}
</td>
<td>
   {{ findData(items, 'West') }}
</td>
<td>
   {{ findData(items, 'Central') }}
</td>

示例：https://plnkr.co/edit/qZsIQKSwUwf4UEud5wxc?p=preview

【讨论】：

【解决方案2】：

如果您坚持使用 ng-repeat 以便可以使用过滤器，则只需在 <span> 元素内的 <span> 上添加 ng-repeat。

基本上是这样的：

<td>
    <span ng-repeat="region in items.regions | filter: {regionName: 'East'}">{{region.capacity.allocated }} / {{region.capacity.capacity}}
    </span>
</td>

【讨论】：

这也可以，但我不需要使用这么多的 ng-repeats，因此我接受了其他答案
没错，避免那些 ng-repeats，除非您期望多个项目。