Angularjs 如何在循环的ng重复中获取当前索引

Angularjs 如何在循环的ng重复中获取当前索引,angularjs,Angularjs,晚上好,我现在面临一个小挑战。 我需要从章节列表中删除一个清单项目。有章节列表,每个章节也有一个清单项目列表。我的html就是这样显示的 <div ng-repeat="section in item.supervisionItemSectionSetupModels" > <div class="col-md-9 form-horizontal"> <div class="alert alert-success">

晚上好,我现在面临一个小挑战。 我需要从章节列表中删除一个清单项目。有章节列表,每个章节也有一个清单项目列表。我的html就是这样显示的

<div ng-repeat="section in item.supervisionItemSectionSetupModels" >
     <div class="col-md-9 form-horizontal">
          <div class="alert alert-success">
               <strong>Checklist Section - {{$index+1}}</strong>
                    <div class="pull-right">
<a href="" ng-show="$index>0" type="button" ng-click="removeSection($index)" class="btn btn-danger" tooltip="Remove this section">
         <span class="fa fa-trash-o"></span>
           </a>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-4">Section Name</label>
                            <div class="col-sm-7">
                                <input name="sectionName" ng-model="section.name" placeholder="Section name" class="form-control" id="sectionName" />
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">                        
                        <table class="table">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th width="60%">What to Check for</th>
                                <th>Options</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="checklist in section.checkListItems">
                                <td>{{$index+1}}</td>
                                <td>
                                    <input type="text" class="form-control" ng-model="checklist.name" style="width: 100%" name="name" placeholder="Checklist Item"/>
                                </td>
                                <td>
                                    <select class="form-control col-sm-3" ng-model="checklist.options" name="options"
                                            ng-options="option.options as option.groupName for option in checklistOption">
                                        <option value="">--Select--</option>
                                    </select>
                                </td>
                                <td>
                                    <a href="" ng-show="$index>0" ng-click="removeCheckListItem($index)" class="btn btn-xs btn-danger" tooltip="Remove this checklist">
                                        <span class="fa fa-trash-o"></span>
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <th colspan="3">
                                    <a href="" type="button" ng-click="addChecklistitem($index)" class="btn btn-success btn-xs" tooltip="Add New Checklist">Add</a>
                                </th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>

                </div>
                <div class="form-group col-md-9">
                    <a href="" type="button" ng-click="addSection()" class="btn btn-success" tooltip="Add New Section">Add new section</a>

                </div>
每次我尝试删除索引部分中的检查表时,都会收到此错误消息

错误:此.$scope.item.supervisionItemSectionSetupModels[n]未定义

addSection方法工作正常,但remove检查表不工作
在浏览了我的代码之后,我发现在我看来,传递给我的removeChecklistItem方法的索引是检查表项的当前索引,它与部分索引不同。你可以看到方法主体有一些问题,我已经仔细考虑过了,但似乎我没有做正确的事情。我该怎么办呢?

我用$parent替换了$index。$index工作正常

     <div ng-repeat="section in item.supervisionItemSectionSetupModels" > 
        <div class="col-md-9 form-horizontal"> 
        <div class="alert alert-success"> 
        <strong>Checklist Section - {{$index+1}}</strong> 
        <div class="pull-right"> 
        <a href="" ng-show="$index>0" type="button" ng-click="removeSection($index)" class="btn btn-danger" tooltip="Remove this section"> 
        <span class="fa fa-trash-o"></span>
         </a> 
        </div> 
        </div> 
        <div class="form-group">
         <label class="control-label col-md-4">Section Name</label> 
        <div class="col-sm-7"> 
        <input name="sectionName" ng-model="section.name" placeholder="Section name" class="form-control" id="sectionName" /> 
        </div>
         </div>
         </div> 
        <div class="col-md-9"> 
        <table class="table"> 
        <thead> 
        <tr> 
        <th>#</th>
         <th width="60%">What to Check for</th>
         <th>Options</th>
         <th></th>
         </tr> 
        </thead> 
        <tbody> 
        <tr ng-repeat="checklist in section.checkListItems"> 
        <td>{{$index+1}}</td> 
        <td> <input type="text" class="form-control" ng-model="checklist.name" style="width: 100%" name="name" placeholder="Checklist Item"/> </td> 
        <td> 
        <select class="form-control col-sm-3" ng-model="checklist.options" name="options" ng-options="option.options as option.groupName for option in checklistOption"> 
    <option value="">--Select--</option>
     </select> 
    </td>
     <td>
     <a href="" ng-show="$index>0" 
ng-click="removeCheckListItem($parent.$index)" 
class="btn btn-xs btn-danger" tooltip="Remove this checklist"> 
    <span class="fa fa-trash-o"></span> 
    </a> 
    </td> 
    </tr> 
    </tbody>
     <tfoot> 
    <tr> 
    <th colspan="3">
     <a href="" type="button" ng-click="addChecklistitem($index)" class="btn btn-success btn-xs" tooltip="Add New Checklist">Add</a> 
    </th>
     </tr> 
    </tfoot> 
    </table>
     </div>
     </div> 
    <div class="form-group col-md-9"> 
    <a href="" type="button" ng-click="addSection()" class="btn btn-success" tooltip="Add New Section">Add new section</a> 
    </div>

第二次ng重复中的$index不是相同的$index。您必须使用$parent.$index或$parent.$parent.$index等…哇,谢谢。它正在工作。事实上,我没有看到$parentbefore@PierreEmmanuelLallemant请根据您的评论作出答复:
     <div ng-repeat="section in item.supervisionItemSectionSetupModels" > 
        <div class="col-md-9 form-horizontal"> 
        <div class="alert alert-success"> 
        <strong>Checklist Section - {{$index+1}}</strong> 
        <div class="pull-right"> 
        <a href="" ng-show="$index>0" type="button" ng-click="removeSection($index)" class="btn btn-danger" tooltip="Remove this section"> 
        <span class="fa fa-trash-o"></span>
         </a> 
        </div> 
        </div> 
        <div class="form-group">
         <label class="control-label col-md-4">Section Name</label> 
        <div class="col-sm-7"> 
        <input name="sectionName" ng-model="section.name" placeholder="Section name" class="form-control" id="sectionName" /> 
        </div>
         </div>
         </div> 
        <div class="col-md-9"> 
        <table class="table"> 
        <thead> 
        <tr> 
        <th>#</th>
         <th width="60%">What to Check for</th>
         <th>Options</th>
         <th></th>
         </tr> 
        </thead> 
        <tbody> 
        <tr ng-repeat="checklist in section.checkListItems"> 
        <td>{{$index+1}}</td> 
        <td> <input type="text" class="form-control" ng-model="checklist.name" style="width: 100%" name="name" placeholder="Checklist Item"/> </td> 
        <td> 
        <select class="form-control col-sm-3" ng-model="checklist.options" name="options" ng-options="option.options as option.groupName for option in checklistOption"> 
    <option value="">--Select--</option>
     </select> 
    </td>
     <td>
     <a href="" ng-show="$index>0" 
ng-click="removeCheckListItem($parent.$index)" 
class="btn btn-xs btn-danger" tooltip="Remove this checklist"> 
    <span class="fa fa-trash-o"></span> 
    </a> 
    </td> 
    </tr> 
    </tbody>
     <tfoot> 
    <tr> 
    <th colspan="3">
     <a href="" type="button" ng-click="addChecklistitem($index)" class="btn btn-success btn-xs" tooltip="Add New Checklist">Add</a> 
    </th>
     </tr> 
    </tfoot> 
    </table>
     </div>
     </div> 
    <div class="form-group col-md-9"> 
    <a href="" type="button" ng-click="addSection()" class="btn btn-success" tooltip="Add New Section">Add new section</a> 
    </div>