console
var app = angular.module("angularDirectiveModule", []);
app.filter('getName', function() {
return function(names) {
var nameString = "";
for (var i = 0; i < names.length; i++) {
nameString += names[i].name + ',';
}
return nameString;
}
});
app.controller("angularDirectiveController", ['$scope', function($scope) {
$scope.data = [{
"name": "上海",
"citys": [{
"name": "长宁",
"counties": [{
"name": "长宁"
}]
},
{
"name": "浦东",
"counties": [{
"name": "浦东"
}]
},
{
"name": "静安",
"counties": [{
"name": "静安"
},
{
"name": "静安1"
}]
}]
},
{
"name": "上海",
"citys": [{
"name": "长宁",
"counties": [{
"name": "长宁"
}]
},
{
"name": "浦东",
"counties": [{
"name": "浦东"
}]
},
{
"name": "静安",
"counties": [{
"name": "静安"
},
{
"name": "静安1"
}]
}]
},
{
"name": "上海",
"citys": [{
"name": "长宁",
"counties": [{
"name": "长宁"
}]
},
{
"name": "浦东",
"counties": [{
"name": "浦东"
}]
},
{
"name": "静安",
"counties": [{
"name": "静安"
},
{
"name": "静安1"
}]
}]
}];
}]);
<div ng-app="angularDirectiveModule" ng-controller="angularDirectiveController">
<table>
<tr ng-repeat="p in data">
<td>
{{p.name}}
</td>
<td>
<table>
<tr ng-repeat="c in p.citys">
<td>
{{c.name}}
</td>
</tr>
</table>
</td>
<td>
<table>
<tr ng-repeat="c in p.citys">
<td>
{{c.counties | getName}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
table {
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #888;
border-top: 1px solid #888;
background: #efefef;
}
th,
td {
border-right: 1px solid #888;
border-bottom: 1px solid #888;
padding: 5px 15px;
}
th {
font-weight: bold;
background: #ccc;
}