How to make a table or list of nested or "trees" in AngularJS

Question

I am new to AngularJS (and web development), but am very excited about the possibility of two-way binding and ng-repeat .

I would like to create a table, such as a structure of text fields, where I can add more fields to a column and then add fields to the columns on the right. Wish to use it to create an attached JSON file.

We are currently thinking of a json structure like this, but would like to have a flatter structure ...

 { "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"] } } 

Update

I tried to answer my question and is very close to the goal.

But I would be grateful for any answer (or motive for my answer) that allows me to archive the target. This, of course, will mean as a solution to the question.

Answer 1

Compatible with this question stackoverflow Display a nested list as a table with AngryCat Amazing JSFiddle nested nodes seems to give me half way

Becomes as follows: 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; } 

I just need to find out 3 parts

• Add () call on first boot
• Move the add and remove buttons to the right (but still having the same function)
• Be able to add main lines .. Or somehow get the first level of the list as a title ...?

Answer 2

Since columns are stored as properties of an object, you need to apply the following syntax for the first ng-repeat :

<div ng-repeat="(key, value) in myObj"> ... </div>

The variable value will contain your array of columns. You can iterate through an array with deault syntax.

Answer 3

Hmm, I'm not confused by the setting, but it looks like you want something to function as a recursive directive? So maybe:

 app.directive('jsonObjectView',[function(){ return { restrict: 'E', scope: { jsonObjectView: '=' // two-way bind about the directive name }, template: '<div ng-repeat="(property,object) in JSONObjects"><div class="object-container"><json-object-view="object"></json-object-view><button ng-click="addProperty(object)"></button></div></div>', // the html template compile: function (element,attributes){ // craft your "addProperty" function (not sure if you want a pop-up or how you're going about it) return { post: function postLink(scope,elem,attr,ctrl){ // Anything else you ought to do } }; } }; }]) 

 <json-object-view="object"></json-object-view> <!-- Which would equate to: --> <div ng-repeat="(property,object) in JSONObjects"> <div class="object-container"> <json-object-view="object"></json-object-view> <button ng-click="addProperty(object)"></button> </div> </div>