AngularJS - How to access an array inside a nested ng-repeat

Question

I have a recursive array in js:

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

It is displayed in AngularJS using ng-repeat recursively with 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 works fine. Now I want to delete one item from inner ng-repeat. I can get the index of the item that I click on(to delete) with $index, also the object cond as parameter on ng-click. I can also access $parent but it points to the root of the object...

How to access the inner array without manually search through the whole conditions array recursively? Its strange that you can easily access the index of the inner array but not the actual array instance.

And any one advice on this issue? Thank you..

EDIT 21/03/2016

Before the accepted answer, the 'brute-force' version is implemented like this:

        $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 it will help others with similar problem.

Are you not able to access it as cond.conditions.type, cond.conditions.conditionId ? — Coder John
– Coder John, Commented Mar 17, 2016 at 14:53
$parent.$parent - ngInclude is creating another scope between your parent repeat and your child repeat. — tymeJV
– tymeJV, Commented Mar 17, 2016 at 14:56
$parent.$parent gave me the controller scope, so the root of the array again. — Bicskei Tibor
– Bicskei Tibor, Commented Mar 17, 2016 at 15:48
@CoderJohn : I can access it, but I want to delete it and I need the containing array to delete from. The example is just two levels deep, imagine if there are 10 levels nested. — Bicskei Tibor
– Bicskei Tibor, Commented Mar 17, 2016 at 15:52

michaelbinks · Accepted Answer · 2016-03-18 07:57:58Z

2

Have you tried setting you delete action to be ng-click="cond=undefined"? This would empty the deleted condition. You could then use ng-show/ng-if to control visibility in the view.

answered Mar 18, 2016 at 7:57

michaelbinks

3701 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeff Diederiks · Accepted Answer · 2016-03-18 02:28:22Z

1

This is how I grab items with multiple indexes:

<div ng-repeat="x in outerArray" ng-init="outerIndex = $index">
  <div ng-repeat="y in innerArray">
    {{ innerArray[outerIndex] }}
  </div>
</div>

I think this is what you were asking? I hope it helps.

answered Mar 18, 2016 at 2:28

Jeff Diederiks

1,38014 silver badges20 bronze badges

3 Comments

Bicskei Tibor Over a year ago

Thank you, I like this. The problem is that my object can be nested any level, not just 2. In that case a list of outer indexes is needed, which is again hard to manage.

Jeff Diederiks Over a year ago

Did @michaelbinks' solution fix the issue or should I propose something else?

Bicskei Tibor Over a year ago

Yes, it is a very good workaround, but I'm curious if you have any other ideas :)

Gregoire · Accepted Answer · 2016-03-17 15:23:07Z

0

You can pass the parent array and the object as parameters (eg.: ng-click="delete(conditions, cond)") and use .indexOf() function to find the index of the object (eg. $scope.delete = function(conditions, cond){index = conditions.indexOf(cond)...})

answered Mar 17, 2016 at 15:23

Gregoire

24.9k7 gold badges50 silver badges74 bronze badges

1 Comment

Bicskei Tibor Over a year ago

Yes, I tried this, but it gives me the root of the array because there is a $scope.conditions in controller. I also tried to rename that variable to have different name from inner arrays. Unfortunately it doesn't work.

Collectives™ on Stack Overflow

AngularJS - How to access an array inside a nested ng-repeat

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related