AngularJS – build立一个基于JSON的dynamic表

鉴于这样的JSON：

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

和两个常规的htmlinput：

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

我需要build立一个所有可能的变化表，例如：

 John green John blue 

这意味着，如果用户通过input继续添加值，则新的行将出现构build新的变体，例如：

我也需要有可用的ID来处理它，而我需要当我添加新的值使用input例如：“彼得”“黑”，我需要自动填充ID（颜色ID）dynamic像一个自动增量MySQL，导致这样的事情：

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

那可能吗？ 我有哪些select与angular度做？ 我仍然想着jQuery的方式，我想以angular度的方式来做。

我看了一下hg-​​repeat，并使用它，但是我没有想出如何提供预期的结果，我想到的唯一的东西是使用嵌套的ng-repeats，但它没有工作。

非常感谢，

吉列尔莫

Answer 1

只是想分享我迄今为止所节省的时间。

这里是硬编docker和dynamic头的例子（如果不关心数据结构的话）。 在这两种情况下，我写了一些简单的指令： 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 } }); 

[静态头文件的第一个选项]

我用单一ng-repeat

这是小提琴的一个很好的例子（ 注意，没有jQuery库！ ）

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

[dynamic标题的第二个选项]

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

---

作为一个方面说明：

ng-bind-html-unsafe已被弃用，所以我只用于Demo（第二个例子）。 您欢迎编辑。

Answer 2

下面是一个使用angularJSdynamic列和行的示例： http ://plnkr.co/edit/0fsRUp?p=preview

Answer 3

TGrid是人们通常在谷歌search中不能find的另一种select。 如果你发现的其他网格不适合你的需求，你可以试一试，免费

Answer 4

看看这个angular度表指令。

Answer 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

Answer 6

首先我要感谢@MaximShoustin。

感谢你我有一个非常好的桌子。

我在$scope.range和$scope.setPage提供了一些小修改。

这样我就有可能去到最后一页，或者回到第一页。 另外当我要去下一页或上一页时，导航正在改变$scope.gap正在穿越。 而当前页面并不总是处于第一位。 对我来说，它看起来更好。

这里是新的小提琴示例： http : //jsfiddle.net/qLBRZ/3/