Assigning numbers to ng-repeat directive's item name

Question

I have a recursive AngularJS directive, which is nested within itself lots of times. The problem is that it isn't working correctly because the names of items in ng-repeat are exactly the same as in outer element. It is a bit hard to understand, so I will just provide some easy code to demonstrate the problem:

<div ng-repeat="item in items">
    <div ng-repeat="item in items">
    {{item.value}}
    </div>
</div>

Item's value will be equal to the outer <div> instead of an inner one.

What I want is to assign a number, based on a nesting, (i.e. 0 - root ng-repeat, 0-1 - second child of root dir, 1-0, first child of second dir and so on) to each item name when a directive is generating a template so it looked something like this:

<div ng-repeat="item-0 in items">
    <div ng-repeat="item-0-0 in items">
    {{item.value}}
    </div>
</div>

Here's my directive:

app.directive('recursiveFields', function ($compile, $http) {
    return {
        scope: {
            field: '=field',
            model: '=model'
        },
        restrict: 'E',
        replace: true,
        controller: "httpPostController",
        template: '<div ng-repeat="nestedField in field.nestedFields"><div ng-show="{{!nestedField.isEntity && !nestedField.isEnum}}">' + '<p ng-show={{nestedField.isRequired}}>{{nestedField.name}}*: </p>' + '<p ng-show={{!nestedField.isRequired}}>{{nestedField.name}}: </p>' + '<input type="text" ng-model="model[field.name][nestedField.name]" ng-change="getCreateEntityAsText()"' + 'class="form-control" placeholder="{{parseClassName(nestedField.type)}}">' + '</div>' + '<div ng-show="{{nestedField.isEnum}}">' + '<p ng-show={{nestedField.isRequired}}>{{nestedField.name}}*: </p>' + '<p ng-show={{!nestedField.isRequired}}>{{nestedField.name}}: </p>' + '<select ng-model="model[field.name][nestedField.name]" ng-change="getCreateEntityAsText()" class="form-control">' + '<option></option>' + '<option ng-repeat="enumValue in nestedField.enumValues" label={{enumValue.name}}>{{enumValue.ordinal}}</option>' + '</select>' + '</div>' +

        '<div ng-show="{{nestedField.restResourceName != null}}">' + '<accordion close-others="oneAtATime">' + '<accordion-group heading={{nestedField.name}} is-open="false">' + '<button type="button" ng-click="appendDirective($event, model, field)">I should append a "recursiveFields" directive</button>' + '</accordion-group>' + '</accordion>' + '</div>' + '</div>',

        link: function (scope, element, attrs, controller) {
            if (scope.field && scope.field.restResourceName != null) {
                $http.get(CONSTANTS.EXPLAIN_URL + "/" + scope.field.restResourceName)
                .success(function (data, status) {
                    scope.field.nestedFields = [];
                    data.content.resource.fields.forEach(function (field) {
                        if (field.isEnum) {
                            $http.get(CONSTANTS.ENUMS_URL + scope.$root.parseClassName(field.type)).success(function (data, status) {
                                field.enumValues = [];
                                for (var index in data.content.values) {
                                    field.enumValues.push(data.content.values[index]);
                                }
                            })
                        }
                        scope.field.nestedFields.push(field);
                    })
                })
            }

            scope.appendDirective = function ($event, model, field) {
                //              var recursiveFields = $('<recursive-fields model="model" field="field"></recursive-fields>');
                var recursiveFields = $('<p>new text </p>');
                recursiveFields.insertAfter($event.target);
                $compile(recursiveFields)(scope);
            }

            scope.getRandomSpan = function () {
                return Math.floor((Math.random() * 6) + 1);
            }
        }
    }
})

Any ideas how this can be achieved? Every useful answer is highly appreciated and evaluated.

Thank you.

Answer 1

Why don't you use another var name?

<div ng-repeat="item in items">
    <div ng-repeat="innerItem in items">
        {{item.value}} 
        {{innerItem.Value}}
    </div>
</div>

Or maybe your directive can have this template:

template: '<div ng-repeat="nestedField[$id] in field.nestedFields .....">

Where $id is the identifier of the new scope created by your directive.

Of course, in this case you should to specify $id when accessing scope vars:

<div ng-show="{{nestedField[$id].restResourceName != null}} ...>