AngularJS - 基于一个JSON构建一个动态表 [英] AngularJS - Building a dynamic table based on a json
问题描述
给定一个JSON是这样的：
Given a json like this:
{
"name": "john"
"colours": [{"id": 1, "name": "green"},{"id": 2, "name": "blue"}]
}
和两个常规的HTML输入：
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:
我还需要有可用的ID来处理它，我需要当我添加使用的输入，例如新的价值：彼得，黑，我需要自动填充的ID（颜色标识）动态像在mysql中自动增加，从而导致这样的事情：
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"}]
}
这可能吗？哪些选项我必须这样做，与棱角分明？我还在想在jQuery的方式，我想做到这一点的角度的方式。
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.
我接过来一看，以HG重复，并用它，但我没有搞清楚如何达到预期的结果，来我的脑海中唯一的事情就是使用嵌套NG-重复，但它didm'将不起作用。
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.
在此先感谢这么多，
吉列尔莫·
推荐答案
只是想与我使用至今节省您的时间分享。
Just want to share with what I used so far to save your time.
下面是硬件codeD标题和动态标题的（在情况下，如果不关心数据结构）的例子。在这两种情况下，我写了一些简单的指令： customSort
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
}
});
[静态头1日选项]
我用单一 NG-重复
[1st option with static headers]
I used single ng-repeat
这是<大骨节病> 小提琴 一个很好的例子（注意，没有jQuery库！的）
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>
[动态标题第二个选项]
演示2：<大骨节病> 小提琴
[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>
的作为一个方面说明：的
的 NG-结合HTML的不安全是德precated，所以我用它仅用于演示（第二个示例）。欢迎你来编辑。
The ng-bind-html-unsafe is deprecated, so I used it only for Demo (2nd example). You welcome to edit.
这篇关于AngularJS - 基于一个JSON构建一个动态表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
