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

时间:2016-01-16 18:35:48

标签: angularjs

晚上好,我现在面临一点挑战。 我需要从部分列表中删除一个核对表项(有部分列表,每个部分也有一个核对表项列表)。我的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>

虽然我的angularJs代码是(在typescript中)

 removeCheckListItem(index) {
        this.$scope.item.supervisionItemSectionSetupModels[index].checkListItems.splice(index, 1);
    }
    addChecklistitem(index) {
        this.$scope.item.supervisionItemSectionSetupModels[index].checkListItems.push({});
    }

    addSection(): void {
        this.$scope.item.supervisionItemSectionSetupModels.push({ checkListItems: [{}]});
    }
    removeSection(index) {
        this.$scope.item.supervisionItemSectionSetupModels.splice(index, 1);
    }

每次我尝试删除带索引的部分中的清单时,都会收到此错误消息

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

addSection方法工作正常,但删除核对清单不起作用 在完成我的代码后,我发现在我看来,索引传递给我的removeChecklistItem方法是清单项目的当前索引,它对于段索引是不同的。你可以看到方法体有一些问题,我已经反复思考,但似乎我没做正确的事情。我该怎么办?

1 个答案:

答案 0 :(得分:0)

我用$ 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>