我是AngularJS(和Web开发)的新手，但对双向绑定(bind)和ng-repeat的可能性感到非常兴奋。
我想建立一个类似文本字段结构的表格，在其中我可以向列中添加更多字段，然后向右侧的列中添加字段。希望使用它来构建嵌套的JSON文件。
目前正在考虑这样的json结构，但想使用更扁平的结构...
{
"NoClicks":
{ "C1": ["R1"],
"C2": ["R1"],
"C3": ["R1"]
},
"C1_R1_clicked":
{ "C1": ["R1", "R2"],
"C2": ["R1", "R2"],
"C3": ["R1", "R2"]
},
"C2_R1_clicked":
{ "C1": ["R1"],
"C2": ["R1", "R2"],
"C3": ["R1", "R2"]
}
,
"C3_R1_clicked":
{ "C1": ["R1"],
"C2": ["R1"],
"C3": ["R1", "R2"]
}
}
更新资料
我试图回答自己的问题，并且已经非常接近目标了。
但是我很感谢任何可以让我存档目标的答案(或答案的模版)。当然，这将被标记为该问题的解决方案。
最佳答案
将这个stackoverflow问题Display nested list like a table与AngryCat's Amazing JSFiddle of nested nodes结合起来似乎让我成功了一半
变成这个:JSFiddle
HTML
<script type="text/ng-template" id="my-tmpl">
{{data.name}}
<button class="btn" ng-click="add(data)" ng-show="levelLimit(data)">
Add node </button>
<button class="btn" ng-click="delete(data)" ng-show="hasNodes(data)">
Delete nodes </button>
<ul>
<li ng-repeat="data in data.nodes" ng-include="'my-tmpl'"></li>
</ul>
</script>
<ul ng-controller="TreeController">
<li ng-repeat="data in tree" ng-include="'my-tmpl'"></li>
</ul>
JS
angular.module("myApp", [])
.controller("TreeController", function($scope) {
var levelLimit = function(data) {
if (data.level < 3) {
return true;
} else {
return false;
};
};
var addNode = function(data) {
var post = data.nodes.length + 1;
var newName = data.name + '-' + post;
var newLevel = data.level + 1;
if (levelLimit(data)) {
var node = {
name: newName,
nodes: [],
level: newLevel
};
data.nodes.push(node);
addNode(node);
}
};
$scope.tree = [{
name: "Node",
nodes: [],
level: 1
}];
$scope.hasNodes = function(data) {
return (data.nodes.length > 0)
};
$scope.levelLimit = levelLimit;
$scope.delete = function(data) {
data.nodes = [];
};
$scope.add = addNode;
});
CSS
li {
display: inline-flex;
border: 1px solid #000;
padding: 0px;
list-style: none;
}
li li {
display:flex;
}
我只需要弄清楚三个部分