AngularJS - построение динамической таблицы на основе json

Учитывая json вот так:

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

и два регулярных входа html:

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

Мне нужно построить таблицу со всеми возможными вариантами, например:

John green
John blue

Это означает, что если пользователь продолжает добавлять значения через входы, появятся новые строки, создающие новые варианты, например:

Мне также нужно иметь доступ к id для его обработки, и мне это нужно, когда я добавляю новые значения, используя входы, например: "Питер" "Черный", мне нужно автоматически идентифицировать идентификатор (цветной идентификатор), как auto increment в mysql, в результате чего-то вроде этого:

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

Это возможно? Какие варианты у меня есть для этого с angular? Я все еще думаю о jQuery, и я хотел бы сделать это в angular.

Я взглянул на hg-repeat и использовал его, но я не понимаю, как доставить ожидаемый результат, единственное, что приходит мне в голову, - использовать вложенные ng-повторы, но он сделал, т работы.

Большое спасибо заранее,

Гильермо

ОТВЕТЫ

Ответ 1

Просто хочу поделиться тем, что я использовал до сих пор, чтобы сэкономить ваше время.

Вот примеры жестко закодированных заголовков и динамических заголовков (в случае, если они не заботятся о структуре данных). В обоих случаях я написал несколько простых директив: customSort

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
    }
    });

[1-й вариант со статическими заголовками]

Я использовал одиночный ng-repeat

Это хороший пример в Fiddle (обратите внимание, что нет библиотеки 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>

[вторая опция с динамическими заголовками]

Демо 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>

В качестве примечания:

ng-bind-html-unsafe устарел, поэтому я использовал его только для демонстрации (2-й пример). Вы можете редактировать.

Ответ 3

TGrid - еще один вариант, который люди обычно не находят в поиске Google. Если другие сетки, которые вы найдете, не удовлетворяют вашим потребностям, вы можете попробовать, бесплатно

Ответ 4

Ознакомьтесь с этой директивой angular-table.

Ответ 5

<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>

назовите это https://gist.github.com/ebellinger/4399082

Ответ 6

Прежде всего, я хотел бы поблагодарить @MaximShoustin.

Спасибо вам, у меня действительно хорошая таблица.

Я предоставляю небольшую модификацию в $scope.range и $scope.setPage.

Таким образом, у меня теперь есть возможность перейти на последнюю страницу или вернуться на первую страницу. Также, когда я перехожу на следующую или предыдущую страницу, навигация меняется, когда $scope.gap пересекает. И текущая страница не всегда находится на первой позиции. Для меня это выглядит более приятным.

Вот пример нового скрипта: http://jsfiddle.net/qLBRZ/3/