web-dev-qa-db-fra.com

AngularJS - Construire une table dynamique basée sur un json

Étant donné un JSON comme ceci:

{
   "name": "john"
   "colours": [{"id": 1, "name": "green"},{"id": 2, "name": "blue"}]
}

et deux entrées HTML normales:

<input type="text" name="name" />
<input type="text" name="color" />
<input type="submit" value="submit" />

J'ai besoin de construire une table avec toutes les variations possibles, ex:

John green
John blue

Cela signifie que si un utilisateur continue à ajouter des valeurs via les entrées, de nouvelles lignes apparaissent, générant les nouvelles variations, par exemple: 

Je dois également disposer de l'identifiant pour le gérer, et lorsque j'ajoute de nouvelles valeurs à l'aide des entrées, par exemple: "Peter" "Black", je dois remplir automatiquement l'identifiant (id de couleur) comme une incrémentation automatique. mysql, aboutissant à quelque chose comme ceci:

{
  "colours": […...{"id": 3, "name": "black"}]
}

Est-ce possible? Quelles options ai-je pour le faire avec angular? Je pense toujours de la manière jQuery et je voudrais le faire de manière angulaire.

J'ai jeté un œil à hg-repeat et je l'ai utilisé, mais je ne me suis pas demandé comment obtenir le résultat attendu. La seule chose qui me vint à l'esprit était d'utiliser des répétitions imbriquées, mais cela n'a pas fonctionné.

Merci beaucoup d'avance,

Guillermo

javascriptangularjs
26
Guillermo

Choc tylko podzielić siê z tym, co y pory pory wykorzystałem, aby zaoszczędzić Twój czas.

À la une nagłówków zakodowanych na stałe i nagłówków dynamicznych (w przypadku, gdy nie zależy na strukturze danych). W obu przypadkach napisałem prostą dyrektywę: customSortname__

customSort 

.directive("customSort", function() {
    return {
        restrict: 'A',
        transclude: true,    
        scope: {
          order: '=',
          sort: '='
        },
        template : 
          ' <a ng-click="sort_by(order)" style="color: #555555;">'+
          '    <span ng-transclude></span>'+
          '    <i ng-class="selectedCls(order)"></i>'+
          '</a>',
        link: function(scope) {

        // change sorting order
        scope.sort_by = function(newSortingOrder) {       
            var sort = scope.sort;

            if (sort.sortingOrder == newSortingOrder){
                sort.reverse = !sort.reverse;
            }                    

            sort.sortingOrder = newSortingOrder;        
        };


        scope.selectedCls = function(column) {
            if(column == scope.sort.sortingOrder){
                return ('icon-chevron-' + ((scope.sort.reverse) ? 'down' : 'up'));
            }
            else{            
                return'icon-sort' 
            } 
        };      
      }// end link
    }
    });

[Pierwsza opcja ze statycznymi nagłówkami]

Uyłem singla ng-repeat

Dobry przykład Fiddle ( Uwaga, nie ma biblioteki jQuery! )

enter image description here

           <tbody>
                <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.description}}</td>
                    <td>{{item.field3}}</td>
                    <td>{{item.field4}}</td>
                    <td>{{item.field5}}</td>
                </tr>
            </tbody>

[Druga opcja z dynamicznymi nagłówkami]

Démo 2: Fiddle

HTML

<table class="table table-striped table-condensed table-hover">
            <thead>
                <tr>
                   <th ng-repeat="header in table_headers"  
                     class="{{header.name}}" custom-sort order="header.name" sort="sort"
                    >{{ header.name }}

                        </th> 
                  </tr>
            </thead>
            <tfoot>
                <td colspan="6">
                    <div class="pagination pull-right">
                        <ul>
                            <li ng-class="{disabled: currentPage == 0}">
                                <a href ng-click="prevPage()">« Prev</a>
                            </li>

                            <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
                                ng-class="{active: n == currentPage}"
                            ng-click="setPage()">
                                <a href ng-bind="n + 1">1</a>
                            </li>

                            <li ng-class="{disabled: (currentPage) == pagedItems.length - 1}">
                                <a href ng-click="nextPage()">Next »</a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tfoot>
            <pre>pagedItems.length: {{pagedItems.length|json}}</pre>
            <pre>currentPage: {{currentPage|json}}</pre>
            <pre>currentPage: {{sort|json}}</pre>
            <tbody>

                <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sort.sortingOrder:sort.reverse">
                     <td ng-repeat="val in item" ng-bind-html-unsafe="item[table_headers[$index].name]"></td>
                </tr>
            </tbody>
        </table>

Na marginesie:

Kod ng-bind-html-unsafe jest przestarzały, więc uyłem go tylko do Démo (drugi przykład). Zapraszamy do edycji.

56
Maxim Shoustin

En voici un exemple avec colonnes et lignes dynamiques avec angularJS: http://plnkr.co/edit/0fsRUp?p=preview

10
Aleck Landgraf

TGrid est une autre option que les gens ne trouvent généralement pas dans une recherche Google. Si les autres grilles que vous trouvez ne répondent pas à vos besoins, vous pouvez l'essayer, c'est gratuit

2
Srivathsa Harish Venkataramana
<table class="table table-striped table-condensed table-hover">
    <thead>
    <tr>
        <th ng-repeat="header in headers | filter:headerFilter | orderBy:headerOrder" width="{{header.width}}">{{header.label}}</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="user in users" ng-class-odd="'trOdd'" ng-class-even="'trEven'" ng-dblclick="rowDoubleClicked(user)">
        <td ng-repeat="(key,val) in user | orderBy:userOrder(key)">{{val}}</td>
    </tr>
    </tbody>
    <tfoot>

    </tfoot>
</table>

référez-vous https://Gist.github.com/ebellinger/4399082

1
Saurabh

Découvrez cette angular-table directive.

1
Samuel Müller

Tout d'abord, je voudrais remercier @ MaximShoustin.

Merci à toi j'ai vraiment belle table.

Je fournis une petite modification dans $scope.range et $scope.setPage.

De cette façon, j'ai maintenant la possibilité d'aller à la dernière page ou de revenir à la première page ..__ également lorsque je passe à la page suivante ou précédente, la navigation change lorsque $scope.gap traverse. Et la page actuelle n'est pas toujours en première position. Pour moi, c'est plus joli.

Voici le nouvel exemple de violon: http://jsfiddle.net/qLBRZ/3/

0
Kosmonaft