我需要一些帮助来修改ng表以添加树功能 - 以便在主节点下扩展其他嵌入式JSON数组。
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="ng-table@*" data-semver="0.3.1" src="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.js"></script>
<link data-require="ng-table@*" data-semver="0.3.1" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.css" />
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
<p><strong>Sorting:</strong> {{tableParams.sorting()|json}}
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
</body>
</html>
然后编写我想要修改JSON数据源的代码：
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: data.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
此示例位于此处：[http://plnkr.co/edit/5SQ2YB?p=info][1]
我的自定义JSON看起来像：
[{
"name": "Tiancum",
"age": "43",
"favoriteCars": [{
"name": "Audi",
"engines": [{
"type": "diesel",
"size": "big"
},
{
"type": "gas",
"size": "small"
}]
},
{
"name": "Subaru",
"engines": [{
"type": "diesel",
"size": "big"
},
{
"type": "gas",
"size": "small"
}]
}]
},
{
"name": "JAcob",
"age": "54",
"favoriteCars": [{
"name": "BMW",
"engines": [{
"type": "diesel",
"size": "big"
},
{
"type": "gas",
"size": "small"
}]
},
{
"name": "VW",
"engines": [{
"type": "diesel",
"size": "big"
},
{
"type": "gas",
"size": "small"
}]
}]
}]
我想要实现的是使嵌入式JSON数组像这里一样可扩展： [http://jsfiddle.net/eu81273/8LWUc/18/][2]
有什么想法可以快速解决这个问题吗？
答案 0 :(得分：0)
如果要为树允许任意深度，则需要创建某种指令来相应地呈现数据。上周有人在AngularJS IRC中分享了这个Plunkr，其中显示了如何通过指令从提供的数据递归生成模板的示例：http://plnkr.co/edit/hhLOmGkNnQj0MrcJgyFi
希望这是一个不错的起点。作为参考，基本思路是：
angular.module('test', []).directive('blockAttributeMenu', ['$compile',
function($compile) {
var Template = '<ul> <li ng-repeat="attribute in (children | orderBy:\'position\')"> {{ attribute.name }}<block-attribute-menu children="attribute.children"/></li> </ul>';
return {
restrict: 'E',
scope: {
'children': '='
},
// replace: true,
// template: Template
compile: function(tElement, tAttrs) {
return function(scope, element, attrs) {
element.append(Template);
$compile(element.contents())(scope);
}
}
};
}
]);
编辑：
好吧，如果你只是要求格式化稍微缩进节点并且你可以保证最大深度为3级（body>tr>td），你可以放弃一些简单的东西：
BodyId，然后TrId，然后TdId对数组进行排序。<tr>附加到DOM，每个属性都有<td>个节点TrId == null，TdId == null，else）并相应地更改缩进级别ng-show之类的内容，并在每一行重复此操作;例如，对ng-show="show_body2"除了父级之外的所有元素BodyId == 2，然后为下一级别添加ng-show="show_body2_tr1"等等。您可以使用ng-click="!show_body2_tr1"这样的简单切换完成它。或者，你可以在一个修改DOM的javascript函数中做同样的事情，但是你不会学习更多Angular你会这样做;）答案 1 :(得分：0)
[
{
"BodyId": 1,
"TrId": null,
"TdId": null,
"Description": "Text Text"
},
{
"BodyId": 2,
"TrId": null,
"TdId": null,
"Description": "Text Text"
},
{
"BodyId": 3,
"TrId": null,
"TdId": null,
"Description": "Text Text"
},
{
"BodyId": 1,
"TrId": 1,
"TdId": null,
"Description": "Text Text"
},
{
"BodyId": 1,
"TrId": 2,
"TdId": null,
"Description": "Text Text"
},
{
"BodyId": 2,
"TrId": 1,
"TdId": null,
"Description": "Text Text"
},
{
"BodyId": 2,
"TrId": 2,
"TdId": null,
"Description": "Text Text"
},
{
"BodyId": 3,
"TrId": 1,
"TdId": null,
"Description": "Text Text"
},
{
"BodyId": 3,
"TrId": 2,
"TdId": null,
"Description": "Text Text"
},
{
"BodyId": 1,
"TrId": 1,
"TdId": 1,
"Description": "Text Text"
},
{
"BodyId": 1,
"TrId": 1,
"TdId": 2,
"Description": "Text Text"
},
{
"BodyId": 1,
"TrId": 2,
"TdId": "1",
"Description": "Text Text"
},
{
"BodyId": 2,
"TrId": 1,
"TdId": 1,
"Description": "Text Text"
},
{
"BodyId": 2,
"TrId": 1,
"TdId": 2,
"Description": "Text Text"
},
{
"BodyId": 2,
"TrId": 2,
"TdId": 1,
"Description": "Text Text"
},
{
"BodyId": 3,
"TrId": 3,
"TdId": 1,
"Description": "Text Text"
}
]
所以给这个JSON我试图实现这个结构：
感谢所有帮助！
