Javascript 将编号分配给ng repeat指令'；项目名称

我有一个递归AngularJS指令，它多次嵌套在自身中。问题是它不能正常工作，因为ng repeat中的项目名称与outer元素中的项目名称完全相同。这有点难理解，因此我只提供一些简单的代码来演示问题：

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

{{item.value}}

项目的值将等于外部的

，而不是内部的值

我想要的是在指令生成模板时，根据嵌套（即0-根ng重复，0-1-根目录的第二个子目录，1-0，第二个目录的第一个子目录等）为每个项目名称分配一个数字，因此它看起来像这样：

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

{{item.value}}

这是我的指示：

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);
            }
        }
    }
})

app.directive（'recursiveFields'，函数（$compile，$http）{
返回{
范围：{
字段：'=字段'，
模型：'=模型'
},
限制：'E'，
替换：正确，
控制器：“httpPostController”，
“p-p-p-p-p-p-p-p-p-p-p-p-p-布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布1.序数}' + '' + '' +
'+'+'+''我应该附加一个“recursiveFields”指令'+'+'+'+''+''+'''''+'''''+'''，
链接：功能（范围、元素、属性、控制器）{
if（scope.field&&scope.field.restResourceName！=null）{
$http.get（CONSTANTS.EXPLAIN_URL+“/”+scope.field.restResourceName）
.成功（功能（数据、状态）{
scope.field.nestedFields=[]；
data.content.resource.fields.forEach（函数（字段）{
if（字段.isEnum）{
$http.get（CONSTANTS.ENUMS_URL+scope.$root.parseClassName（field.type））.success（函数（数据、状态）{
field.enumValues=[]；
for（data.content.values中的var索引）{
field.enumValues.push（data.content.values[index]）；
}
})
}
scope.field.nestedFields.push（字段）；
})
})
}
scope.appendDirective=函数（$event，model，field）{
//var recursiveFields=$（''）；
var recursiveFields=$（“新文本”
”）；
recursiveFields.insertAfter（$event.target）；
$compile（递归字段）（范围）；
}
scope.getRandomSpan=函数（）{
返回Math.floor（（Math.random（）*6）+1）；
}
}
}
})

有什么办法可以做到这一点吗？每一个有用的答案都受到高度赞赏和评价

---

谢谢。

为什么不使用另一个var名称

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

{{item.value}}
{{innerItem.Value}

或者，您的指令可以包含以下模板：

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

模板：'

其中，$id是由指令创建的新范围的标识符

当然，在这种情况下，您应该在访问范围变量时指定$id：

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

---

因为外部、内部和所有其他嵌套对象都是由来自模板的指令以相同的名称生成的。因此，您的指令可以具有以下模板：模板：“$id是由您的指令创建的新范围的标识符。由于某些原因不起作用：