Javascript 如果一列中有使用angular js的值列表,如何在其中生成嵌套表?
index.jsJavascript 如果一列中有使用angular js的值列表,如何在其中生成嵌套表?,javascript,asp.net-mvc,angularjs,angularjs-scope,angularjs-ng-repeat,Javascript,Asp.net Mvc,Angularjs,Angularjs Scope,Angularjs Ng Repeat,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":"
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>
<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]">
<div ng-if="value[0].Id">
<table>
<tr>
<td>Id:</td><td>{{value[0].Id}}</td>
</tr>
<tr>
<td>Value:</td><td>{{value[0].Value}}</td>
</tr>
</table>
</div>
<div ng-if="!(value[0].Id)">
{{value}}
</div>
</td>
</tr>
</tbody>
</table>
{{value}}
{{value}}
它给了我一个完美的表格,但问题出在一列MyValues
。
我有一个数据列表,希望创建一个包含所有列表值的嵌套表
我怎样才能做到这一点?要检查是否有任何列具有列表(如果是)
然后生成嵌套表。
检查一下这个垃圾桶
我不太确定你想要渲染什么,但这可能会给你一些想法 见: app.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>
<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]">
<div ng-if="value[0].Id">
<table>
<tr>
<td>Id:</td><td>{{value[0].Id}}</td>
</tr>
<tr>
<td>Value:</td><td>{{value[0].Value}}</td>
</tr>
</table>
</div>
<div ng-if="!(value[0].Id)">
{{value}}
</div>
</td>
</tr>
</tbody>
</table>
{{value}}
Id:{{值[0].Id}
值:{{Value[0]。值}
{{value}}
如果您需要更一般,也许可以做一些类似于
的事情,而不是
。虽然我没有时间尝试让它工作,但是有一些东西需要研究。您可以这样编写标记:
<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>
{{k}
{{sh}
{{sv}}
{{value}}
完整代码:感谢您的快速回复,但我不想指定列名
Id:{{value[0].Id}}
,因为这就是为什么需要一个动态解决方案,比如主表值是如何以同样的方式绑定的。如果您还想生成内部表,请提前指导我,谢谢您在底部添加了我,你应该能够做
或类似的事情来知道它是一个数组/集合,但我没有时间让它工作。我可以有任何类似的线程:(我试过了,但是angularjs中的I;n新手我没能做到。你的数据嵌套得有多深?只需一步,就像MyValues一样,其他列可以有相同的数据加入angularjs聊天室: