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