AngularJS : Extensible récursive de l'arbre de la table

Je suis en train de travailler sur angulaire de l'arbre de données récursive de la table. L'idée est donc de jeter de l'arbre de données (sans savoir le ministère de l'arbre) et de rendre l'arbre comme une table correctement avec le nœud extensible. Droit maintenant, je suis avec succès ne l'arbre de la table par récursive appelez modèle pour créer un tableau à l'intérieur du tableau

Voici le code ou vous pouvez le voir en action ici : jsfiddle

<script type="text/ng-template"  id="tree_item.html">

   <tr style="width:100%">
      <td><i class="fa fa-folder-open"></i></td>
      <td>
            {{data.name}}

        <div id="expanded-data">
            <table class="table table-striped" id="nested-table">
                    <div ng-repeat="data in data.nodes" ng-include="'tree_item.html'">     </div>
            </table>
        </div>
    </td>
</tr>

</script>


 <table class="table table-striped">
 <thead>
    <tr>
        <th style="width:30px;"><i ng-click="loadItems()" class="fa fa-refresh blueicon"></i></th>
        <th style="width:auto">Data tree</th>
    </tr>
</thead>
<tbody ng-repeat="data in treeData" ng-include="'tree_item.html'">

</tbody>

</table>

Maintenant je suis coincé à l'étape suivante, qui est de permettre à bascule développez & effondrement lorsque vous cliquez sur l'icône de dossier puis définissez noeud enfant de display= none.

J'ai essayé quelques-uns avec ng-switch, mais sans succès. Avez-vous les gars avez des Idées de comment faire cela ?

Merci 🙂

jsfiddle.net/8f3rL/34
travailler comme un charme, merci !
jsfiddle.net/8f3rL/35 * je missspelled dossier

OriginalL'auteur Pung Worathiti Manosroi | 2014-03-27

  1. 4

    Ajouter ng-si ici

    <div id="expanded-data" data-ng-if="childrenVisible">

    et donner à vos éléments de l'arborescence, une propriété qui définit la visibilité de leurs enfants.
    Définir la propriété véritable ou faux (si vous souhaitez faux juste ne pas l'ajouter par défaut) par défaut et mettre en œuvre un toggleChildren fonction qui est appelée par un clic sur le toggleButton (le dossier)

    scope.toggleChildren = function () {
    scope.item.childrenVisible = !scope.item.childrenVisible;
}

    EDIT://Maintenant, changer de dossier (ouvert ou fermé)
    http://jsfiddle.net/8f3rL/35/

    OriginalL'auteur John Smith

  2. 6

    Vous pouvez envisager d'utiliser des arbres de la grille.

    démo: extensible grille

      <tree-gird tree-data="tree_data"></tree-grid>

    Fournir un arbre structuré de données, définition de la colonne et une propriété où vous souhaitez développer.

    Fournir un arbre structuré de données, définition de la colonne et une propriété où vous souhaitez développer dans votre contrôleur.

     $scope.tree_data = [
   {Name:"USA",Area:9826675,Population:318212000,TimeZone:"UTC -5 to -10",
  children:[
    {Name:"California", Area:423970,Population:38340000, TimeZone:"Pacific Time",
        children:[
            {Name:"San Francisco", Area:231,Population:837442,TimeZone:"PST"},
            {Name:"Los Angeles", Area:503,Population:3904657,TimeZone:"PST"}
        ]
    },
    {Name:"Illinois", Area:57914,Population:12882135,TimeZone:"Central Time Zone",
        children:[
            {Name:"Chicago", Area:234,Population:2695598,TimeZone:"CST"}
        ]
     }
   ]
  },    
  {Name:"Texas",Area:268581,Population:26448193,TimeZone:"Mountain"}
];

    En option, vous pouvez définir la colonne des définitions, des propriétés sur lequel vous souhaitez utiliser la développer et réduire 

    $scope.col_defs = [
   { field: "Description"},
   { field: "DemographicId", displayName: "Demographic Id"},
   { field: "ParentId", displayName: "Parent Id"},
   { field: "Area"},
   { field: "Population"},
   { field: "TimeZone", displayName: "Time Zone"}
];


$scope.expanding_property = "Name";

    détails: https://github.com/khan4019/tree-grid-directive

    Merci man ! joli cadre btw

    OriginalL'auteur KhanSharp