AngularJS - 基于 json 构建动态表 [英] AngularJS - Building a dynamic table based on a json

问题描述

给定一个这样的 json:

<代码>{姓名":约翰""颜色": [{"id": 1, "name": "green"},{"id": 2, "name": "blue"}]}

和两个常规的 html 输入:

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

我需要建立一个包含所有可能变化的表格，例如:

约翰格林约翰蓝

这意味着如果用户继续通过输入添加值，将出现新的行来构建新的变体，例如:

我还需要有可用的 id 来处理它，当我使用输入添加新值时需要它，例如:Peter"Black"，我需要像在 mysql 中自动递增，结果如下:

<代码>{颜色":[....{id":3，名称":黑色"}]}

这可能吗?我有哪些选项可以用 angular 做到这一点?我还在用 jQuery 的方式思考，我想用 angular 的方式来做.

我查看了 hg-repeat，并使用了它，但我不知道如何提供预期的结果，我唯一想到的是使用嵌套的 ng-repeat，但它确实如此工作.

非常感谢，

吉列尔莫

解决方案

只想分享我目前使用的东西，以节省您的时间.

以下是硬编码标头和动态标头的示例(如果不关心数据结构).在这两种情况下，我都写了一些简单的指令:customSort

自定义排序

.directive("customSort", function() {返回 {限制:'A'，转置:真实，范围: {顺序:'='，排序:'='},模板 :' <a ng-click="sort_by(order)" style="color: #555555;">'+' <span ng-transclude></span>'+' <i ng-class="selectedCls(order)"></i>'+'</a>',链接:功能(范围){//改变排序顺序scope.sort_by = 函数(新排序顺序){var sort = scope.sort;如果(sort.sortingOrder == newSortingOrder){sort.reverse = !sort.reverse;}sort.sortingOrder = newSortingOrder;};scope.selectedCls = 函数(列){if(column == scope.sort.sortingOrder){return ('icon-chevron-' + ((scope.sort.reverse) ? 'down' : 'up'));}别的{返回'图标排序'}};}//结束链接}});

[带有静态标题的第一个选项]

我使用了单个 ng-repeat

这是

<小时>

HTML

<头><tr><th ng-repeat="header in table_headers"class="{{header.name}}" custom-sort order="header.name" sort="sort">{{ header.name }}</th></tr></thead><脚><td colspan="6"><div class="pagination pull-right"><ul><li ng-class="{disabled: currentPage == 0}"><a href ng-click="prevPage()">« Prev</a><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 ng-class="{disabled: (currentPage) == pagedItems.length - 1}"><a href ng-click="nextPage()">下一步 »</a>
</td></tfoot><pre>pagedItems.length: {{pagedItems.length|json}}</pre><pre>currentPage: {{currentPage|json}}</pre><pre>currentPage: {{sort|json}}</pre>
<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>

<小时>

附注:

ng-bind-html-unsafe 已弃用，因此我仅将其用于演示(第二个示例).欢迎您编辑.

Given a json like this:

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

and two regular html inputs:

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

I need to build a table with all the possible variations, ex:

John green
John blue

That means that if a user continues adding values through the inputs new rows will appear building the new variations, for instance:

I also need to have available the id to handle it, and I need that when I add new values using the inputs for instance: "Peter" "Black", I need to autofill the id (colour id) dynamically like an auto increment in mysql, resulting in something like this:

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

Is that possible? Which options do I have for doing that with angular? I'm still thinking in the jQuery way and I would like to do it in the angular way.

I took a look to hg-repeat, and used it, but I'm not figuring out how to deliver the expected result, the only thing that come to my mind was to use nested ng-repeats, but it didm´t work.

Thanks so much in advance,

Guillermo

解决方案

Just want to share with what I used so far to save your time.

Here are examples of hard-coded headers and dynamic headers (in case if don't care about data structure). In both cases I wrote some simple directive: 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
    }
    });

[1st option with static headers]

I used single ng-repeat

This is a good example in Fiddle (Notice, there is no jQuery library!)

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

[2nd option with dynamic headers]

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

---

As a side note:

The ng-bind-html-unsafe is deprecated, so I used it only for Demo (2nd example). You welcome to edit.

这篇关于AngularJS - 基于 json 构建动态表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！