如何防止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]">

復選框