function myComponentController() {
this.addNode = function(el) {
el.complex.push({
name: "New name",
local: "New local",
complex: [],
});
}
}
const myComponentConstructor = {
controller: myComponentController,
controllerAs: "$ctrl",
bindings: {
data: '=',
},
template: `
<div ng-repeat="el in $ctrl.data" class="block">
<span>Name: {{el.name}}</span>
<my-component data="el.complex"></my-component>
<button ng-click="$ctrl.addNode(el)">Add another</button>
</div>
`,
}
const app = angular
.module("app", [])
.component("myComponent", myComponentConstructor);
.block {
border: solid 1px red;
padding: 5px;
margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<my-component data='[{
name: "AB",
local: "CD",
complex: [{
name: "EF",
local: "GH",
complex: [{
name: "IJ",
local: "LL",
complex: []
}]
}]
},
{
name: "PQ",
local: "RS",
complex: [{
name: "TU",
local: "VW",
complex: [{
name: "XY",
local: "Z1",
complex: []
}]
}]
}]'></my-component>
</div>