Javascript AngularJS-基于json构建动态表

给定如下json：

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

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

和两个常规html输入：

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

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

我还需要有可用的id来处理它，我需要在使用输入（例如：“Peter”“Black”）添加新值时，我需要像mysql中的自动增量一样动态地自动填充id（颜色id），结果如下：

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

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

可能吗？我有哪些选项可以使用angular进行此操作？我仍然在用jQuery的方式思考，我想用角度的方式来思考

我查看了hg repeat，并使用了它，但我不知道如何交付预期的结果，我想到的唯一一件事是使用嵌套的ng repeat，但它不起作用

先谢谢你

---

Guillermo

只想与大家分享我迄今为止为节省您的时间所做的一切

下面是硬编码头和动态头的示例（如果不关心数据结构）。在这两种情况下，我都编写了一些简单的指令：

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

[带动态标题的第二个选项] 演示2:

---

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>

{{header.name}








pagedItems.length:{{pagedItems.length | json}
currentPage:{{currentPage | json}}
当前页面：{sort | json}

---

作为旁注：

---

不推荐使用

ng bind html unsafe

，因此我仅将其用于演示（第二个示例）。欢迎您编辑

下面是一个带有angularJS的动态列和行的示例：

是人们在谷歌搜索中通常找不到的另一个选项。如果您发现其他网格不适合您的需要，您可以尝试一下，它是免费的。

请查看此指令。

首先，我要感谢@MaximShoustin

谢谢你，我有一张很好的桌子

我在

$scope.range

和

$scope.setPage

中提供了一些小的修改

这样我就有可能回到最后一页或者回到第一页。 另外，当我进入下一页或上一页时，

$scope.gap

交叉时，导航也会改变。并且当前页面并不总是在第一个位置。对我来说，它看起来更漂亮

以下是新的小提琴示例：

{{header.label}
{{val}}

---

参考此

非常感谢您的回答，格言！我真的很感激！致以最诚挚的问候，Guillermo您能在2日提供一个完整的动态标题的实时示例吗？：）@devH感谢您的评论。我用两个工作示例戏剧性地改变了我的答案。这里也一样，非常感谢这个答案非常有信息性！我终于自己建造了一些东西。再次感谢：）

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