如何防止ng-repeat中的嵌套表填充到每一行？

Question

好的，所以我想创建一个动态嵌套的表层次结构。 我得到的数据没有问题，但是在每个级别上使用ng-repeat会使父表将特定行的子数据插入父表的每一行。 我想防止这种情况，但我尝试使用ng-repeat-start和ng-repeat-end，但是由于表嵌套的原因，我无法在适当的位置添加end标签来停止重复。

UPDATE让我在这里澄清一下，我有3个嵌套表，顶层表具有组列表，第一个子表是属于父表中特定组的所有项目的列表。 当用户单击展开按钮时，我会根据单击父表中的哪一行来填充子表，这是可以的，但是现在，子表将显示在每个父表行中，而不仅仅是单击的行。

Plunker链接 http://plnkr.co/edit/RVOnf9wBF3TzXauzvMfF

HTML：

<table id="sicGroupTable" class="RadGrid_Metro">
   <thead>
       <tr>
          <td>Sic Code Group</td>
       </tr>
   </thead>
       <tbody ng-repeat="group in sicCodeGroup">
           <tr class="rgRow">
               <td class="rgExpandCol"><img class="rgExpand" ng-click="expandRow(group.GroupId)" ng-model="hideTwoDigitSub" /></td>
               <td><input type="checkbox" ng-model="SelectGroup" /></td>
               <td>{{group.GroupName}}</td>
           </tr>
           <tr ng-hide="hideTwoDigitSub">
               <td></td>
               <td>
                   <table id="sic2DigitTable" class="RadGrid_Metro">
                       <thead>
                           <tr>
                               <th>2 digit sic Code</th>
                           </tr>
                       </thead>
                           <tbody>
                               <tr ng-repeat="twoDigitSic in twoDigitSicCodes" class="rgRow">
                                   <td class="rgExpandCol"><img class="rgExpand" ng-click="expandRow(twoDigitSic.SicCode)" /></td>
                                   <td><input type="checkbox" ng-model="Select2DigitSicCode" /></td>
                                   <td>{{twoDigitSic.SICCode2}} - {{twoDigitSic.Title}}</td>
                                </tr>
                                <tr>
                                <td></td>
                                 <td>
                                     <table id="sic4DigitTable" class="RadGrid_Metro">
                                         <thead>
                                             <tr>
                                                 <th>4 digit sic code</th>
                                             </tr>
                                         </thead>
                                             <tbody>
                                                 <tr class="rgRow">
                                                     <td class="rgExpandCol"><img class="rgExpand" ng-click="expandRow(sicCode.SicCode)" /></td>
                                                     <td><input type="checkbox" ng-model="Select2DigitSicCode" /></td>
                                                     <td>{{sicCode.SicCode}} - {{sicCode.Title}}</td>
                                                 </tr>
                                                 <tr>
                                                     <td></td>
                                                 </tr>
                                              </tbody>
                                          </table>
                                      </td>
                                  </tr>
                              </tbody>
                          </table>
                      </td>
                  </tr>
              </tbody>
          </table>

JavaScript的：

var app = angular.module("apptSetting", ['ngResource'])

app.factory('dataFactory',
    function ($resource) {
        return {
            getSicGroups: $resource('../Packages/GetJsonSicCodeGroups'),
            expandRow: $resource('../Packages/GetExpandedRowData')
        }
    });

app.controller('aPackageController', ['$scope', 'dataFactory', function ($scope,  dataFactory) {
function init() {
    $scope.hideTwoDigitSub = true;
    $scope.hideFourdigitsub = true;
}
$scope.sicCodeGroup = dataFactory.getSicGroups.query({}, isArray = true);
$scope.twoDigitSicCodes = null;
$scope.expandRow = function (groupId, sicCode) {
    if (groupId != undefined)
    {
        $scope.twoDigitSicCodes = dataFactory.expandRow.query({ GroupId: groupId }, isArray = true);
        $scope.hideTwoDigitSub = false;
        if (sicCode != null && sicCode != undefined && sicCode != "") {
            if (sicCode.length == 2) {
                $scope.hideTwoDigitSub = false;
                $scope.twoDigitSicCodes = dataFactory.Get2DigitSicCodes.query({ GroupId: groupId }, isArray = true);
            }
        }
    }     
}
    init();
}])

Answer 1

问题是，你使用一个布尔hideTwoDigitSub来控制所有的tr S按您所创建的ngRepeat ：

<tr ng-hide="hideTwoDigitSub">

所以当你设置$scope.hideTwoDigitSub = false; ngHide中的每个ngHide ngRepeat得到false，因此将显示所有tr元素。

单选按钮修复

我不使用布尔值，而是将hideTwoDigitSub设置为要显示的行的groupId （也许将hideTwoDigitSub重命名为showTwoDigitSub因为变量现在指示要显示的行）。

因此，在您的expandRow()函数中，我将通过更改来设置要显示的行：

$scope.hideTwoDigitSub = false;

至

$scope.hideTwoDigitSub = groupId;

并将上面的tr更改为：

<tr ng-hide="hideTwoDigitSub != group.GroupId">

因此，除非您的控制变量hideTwoDigitSub不等于当前组GroupId否则该行将被隐藏。

或者，它可能是更清晰的使用ngShow （请注意，我改变了hideTwoDigitSub到showTwoDigitSub在这个例子中，因为它更清晰）：

<tr ng-show="showTwoDigitSub == group.GroupId">

单选按钮按钮

复选框解决方案

这种方法最容易完成，将hideTwoDigitSub切换为showTwoDigitSub因此下面的所有操作均hideTwoDigitSub为前提。

对于这种方法，在init()内部，将您的控制变量设置为数组：

$scope.showTwoDigitSub=[];

然后在expand内部切换适当的控件：

$scope.showTwoDigitSub[groupId] = !$scope.showTwoDigitSub[groupId]; 

并在html中使用数组：

<tr ng-show="showTwoDigitSub[group.GroupId]">

复选框