Here is the code snippet:
<body>
<div ng-app=''>
<div ng-controller="questionCtrl">
<div>
<ul />
<li ng-repeat="prdElement in palletElement">
<input type="text" ng-model="prdElement.name" placeholder="Name" required />
<ul>
<li ng-repeat="elemnt in prdElement.children">
<div>
<span>
<input type="text" ng-model="elemnt.name" placeholder="Name" required />
</span>
<span ng-hide="elemnt.length == 1">
<a href ng-click="prdElement.splice($index, 1)">remove</a>
</span>
</div>
<hr />
</li>
<li>
<a href ng-click="newPrdItem($event)">New Item</a>
</li>
</ul>
</li>
</div>
<div>
<button ng-click="showitems($event)">Submit</button>
</div>
<div id="displayitems" style="visibility:hidden;">
{{prdElement}}
</div>
</div>
</div>
function questionCtrl($scope){
var counter=0;
$scope.palletElement = [{
name: 'Pallet 1',
children: [{
name: '11',
}, {
name: '12',
}]
}, {
name: 'Pallet 2',
children: [{
name: '21'
}, {
name: '22'
}]
}]
$scope.newPrdItem = function ($event) {
counter++;
$scope.prdElement.children.push({ id: counter, name: ''});
$event.preventDefault();
}
$scope.showitems = function($event){
$('#displayitems').css('visibility','none');
}
}
JSFiddle everything seems fine but there's an issue with adding and removing elements functionality