I am working with a recursive array in JavaScript:
[{
type: 'cond',
conditionId: 1,
conditions: undefined
},
{
type: 'cond',
conditionId: 2,
conditions: undefined
},
{
type: 'group',
conditionId: undefined,
conditions: [{
type: 'cond',
conditionId: 3,
conditions: undefined
},
{
type: 'cond',
conditionId: 4,
conditions: undefined
}]
}]
In my AngularJS application, I am using ng-repeat to display this recursively with an inline template:
<script type="text/ng-template" id="recursive_template.html">
<div> some logic </div>
<div ng-repeat="cond in cond.conditions" ng-include="'recursive_template.html'"></div>
<div> some more logic </div>
</script>
<div ng-controller="EditRulesController">
<div ng-repeat="cond in conditions" ng-include="'recursive_template.html'" class="row">
</div>
</div>
Everything is functioning properly. However, I now want to remove an item from the inner ng-repeat. I have the index of the clicked item (to delete) and access to the object cond as a parameter on ng-click. I can also use $parent, but it refers to the root object...
Is there a way to access the inner array without having to manually search through the entire conditions array recursively? It seems odd that the index of the inner array is easily accessible, but not the actual array instance.
Any advice on how to tackle this issue would be greatly appreciated. Thank you.
EDIT 21/03/2016
Prior to the accepted answer, a 'brute-force' approach was implemented like so:
$scope.deleteConditionClick = function (id) {
deleteCondition($scope.conditions, id);
};
function deleteCondition(conditions, id) {
var conds = conditions;
if (conds) {
for (var i = 0; i < conds.length; i++) {
if (conds[i].type === 'cond') {
if (conds[i].conditionId === id) {
conds.splice(i, 1);
return true;
}
} else if (conds[i].type === 'group') {
deleteCondition(conds[i].conditions, id);
}
}
}
}
I hope this helps others facing a similar challenge.