如果使用 angular js 有值列表,如何在一列中生成嵌套表? [英] How do I generate nested table in one column if it has list of values using angular js?
本文介绍了如果使用 angular js 有值列表,如何在一列中生成嵌套表?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
index.js
var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {$scope.name = '世界';$scope.data =[{"Id":1,"Title":"en-US","Description":"UnitedStates","MyValues":[{"Id":100,"Value":"Save"}]},{"Id":1,"Title":"en-UK","Description":"UK","MyValues":[{"Id":102,"Value":"Delete"}]}]$scope.cols = Object.keys($scope.data[0]);$scope.notSorted = function(obj){如果(!对象){返回 [];}返回 Object.keys(obj);}});
index.html
<头><tr><th ng-repeat="key in notSorted(cols)" ng-init="value=cols[key]">{{value}}</th></tr></thead><tr ng-repeat="数据中的行"><td ng-if="!$last" ng-repeat="dat in notSorted(row)" ng-init="value=row[dat]">{{value}}</td></tr></tbody>
它给了我完美的表格,但问题是在一列 MyValues
中.我有数据列表,想要创建包含所有列表值的嵌套表.
我怎样才能做到这一点?想要检查是否有任何列有 List 如果是然后生成嵌套表.检查这个 plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview
解决方案
你这样写你的标记:
<头><tr><th ng-repeat="(k,v) in data[0]">{{k}}</th></tr></thead><tr ng-repeat="数据中的项目"><td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)"><table ng-if="isArr"><头><tr><th ng-repeat="(sh, sv) in value[0]">{{sh}}</th></tr></thead><tr ng-repeat="sub in value"><td ng-repeat="(sk, sv) in sub">{{sv}}</td></tr></tbody>
<span ng-if="!isArr">{{value}}</span></td></tr></tbody>
完整代码:https://gist.github.com/anonymous/487956892d760c17487c>
index.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data =[{"Id":1,"Title":"en-US","Description":"UnitedStates","MyValues":[{"Id":100,"Value":"Save"}]},
{"Id":1,"Title":"en-UK","Description":"UK","MyValues":[{"Id":102,"Value":"Delete"}]}]
$scope.cols = Object.keys($scope.data[0]);
$scope.notSorted = function(obj){
if (!obj) {
return [];
}
return Object.keys(obj);
}
});
index.html
<table border=1>
<thead>
<tr>
<th ng-repeat="key in notSorted(cols)" ng-init="value=cols[key]">{{value}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data">
<td ng-if="!$last" ng-repeat="dat in notSorted(row)" ng-init="value=row[dat]">{{value}}</td>
</tr>
</tbody>
</table>
It gives me perfect table but problem is in one column MyValues
.
I have list of data and want to create nested table with all List value.
How can I achieve this? Want to check if any column has List if yes then generate nested table. check this plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview
解决方案
You write your markup this way:
<table>
<thead>
<tr>
<th ng-repeat="(k,v) in data[0]">{{k}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)">
<table ng-if="isArr">
<thead>
<tr>
<th ng-repeat="(sh, sv) in value[0]">{{sh}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sub in value">
<td ng-repeat="(sk, sv) in sub">{{sv}}</td>
</tr>
</tbody>
</table>
<span ng-if="!isArr">{{value}}</span>
</td>
</tr>
</tbody>
</table>
Full code: https://gist.github.com/anonymous/487956892d760c17487c
这篇关于如果使用 angular js 有值列表,如何在一列中生成嵌套表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文