angularjs - How to get the current Index in an ng-repeat of a loop -
good evening, i'm faced little challenge here. need remove checklist item list of section(there list of sections , each section has list of checklist items too). html shown thus.
<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 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 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 option.groupname 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 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> while angularjs code is(in 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); } each time tried removing checklist in section index, error message
error: this.$scope.item.supervisionitemsectionsetupmodels[n] undefined
the addsection method works fine, remove checklist not working after going through code, discovered in view, index been passed removechecklistitem method current index of checklist item of it's different section index. can see method body has issues, i've ruminated on seems i'm not doing right thing. supposed please?
i replaced $index $parent.$index , worked fine
<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 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 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 option.groupname 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 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> 
Comments
Post a Comment