comment puis-je empêcher les tables imbriquées dans ng-repeat de se remplir dans chaque ligne ?

Question

OK, je souhaite donc créer une hiérarchie dynamique de tables imbriquées.Je reçois leurs données sans problème, mais l'utilisation de ng-repeat à chaque niveau amène la table parent à insérer les données enfants d'une ligne spécifique dans chaque ligne de la table parent.Je veux éviter cela, j'ai essayé d'utiliser ng-repeat-start et ng-repeat-end, cependant, en raison de l'imbrication des tables, je ne peux pas ajouter la balise de fin à un endroit approprié pour arrêter la répétition.

MISE À JOURPermettez-moi de clarifier un peu ici, j'ai 3 tables imbriquées, la table de niveau supérieur a une liste de groupes, la première table enfant est une liste de tous les éléments qui appartiennent à un groupe spécifique dans la table parent.Lorsque l'utilisateur clique sur le bouton Développer, je remplis la table enfant en fonction de la ligne de la table parent sur laquelle il a cliqué. C'est OK, mais la table enfant apparaît désormais dans chacune des lignes de la table parent au lieu de simplement la ligne sur laquelle on a cliqué. .

Lien 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

Le problème est que vous utilisez un seul booléen hideTwoDigitSub pour contrôler tous les trest créé par votre ngRepeat:

<tr ng-hide="hideTwoDigitSub">

Alors, quand vous définissez $scope.hideTwoDigitSub = false; chaque ngHide au sein de votre ngRepeat ça devient faux et donc tout le tr les éléments sont affichés.

Correction du bouton radio

Au lieu d'utiliser un booléen, je définirais hideTwoDigitSub au groupId pour la ligne que vous souhaitez afficher (et peut-être renommer hideTwoDigitSub à showTwoDigitSub puisque la variable indique maintenant quelle ligne afficher).

Alors à l'intérieur de ton expandRow() fonction, je définirais la ligne à afficher en modifiant :

$scope.hideTwoDigitSub = false;

à

$scope.hideTwoDigitSub = groupId;

Et change ce qui précède tr à:

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

La ligne sera donc masquée à moins que votre variable de contrôle hideTwoDigitSub n'est pas égal aux groupes actuels GroupId.

Ou il serait peut-être plus clair d'utiliser ngShow (attention, j'ai changé le hideTwoDigitSub à showTwoDigitSub dans cet exemple puisque c'est plus clair) :

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

Plunker de bouton radio

Solution de case à cocher

Cette approche est la plus simple à réaliser hideTwoDigitSub à showTwoDigitSub- donc tout ce qui suit suppose cela.

Pour cette approche, à l'intérieur init() Je définirais votre variable de contrôle comme étant un tableau :

$scope.showTwoDigitSub=[];

Et puis basculez le contrôle approprié à l'intérieur expand:

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

Et utilisez le tableau dans votre code HTML :

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

Plunker de case à cocher