The angular jj deletes the table row does not work

advertisements

When I remove table row in Angular it's removing all rows after index, I want to remove the particlar row.

HTML :

<div>
<table class="table">
    <tr>
        <td>Date of GPA</td>
        <td>Type</td>
        <td>Grade</td>
        <td>Standard GPA</td>
        <td></td>
    </tr>
    <tr ng-repeat="gpa in ctrl.gpatests">
        <td>
            <md-input-container>
                <input ng-model="gpa[$index].date" ui-mask="99/99/9999">
            </md-input-container>
        </td>
        <td>
            <md-select ng-model="gpa[$index].type" ng-required="true">
                <md-option ng-value="item.id" ng-repeat="item in ctrl.dispHsGradYr">{{item.displayName}}</md-option>
            </md-select>
        </td>
        <td>
            <md-select ng-model="gpa[$index].grade" ng-required="true" >
                <md-option ng-value="item.id" ng-repeat="item in ctrl.dispHsGradYr">{{item.displayName}}</md-option>
            </md-select>
        </td>
        <td>3.0</td>
        <td><input type="text" ng-model="gpa[$index].id"/>{{$index}}<span ng-click="removeGPAScore(gpa[$index].id)"> x </span></td>
    </tr>
</table>
<button class="md-raised md-primary savebtn md-button md-default-theme" ng-click="addGPAScore()" type="BUTTON" aria-disabled="false">
        <span class="ng-scope">ADD GPA</span>
</button>
{{ctrl.gpatests | json}}
</div>

removeGPAScore , addGPAScore functions

Script :

$scope.addGPAScore(){
    var data = {};
    data.id ='' ;
    data.date ='' ;
    data.type ='';
    data.grade ='';
    data.gpaValue ='';
    ctrl.gpatests.push(data);
}

$scope.removeGPAScore(index){
    ctrl.gpatests=newDataList;
    ctrl.gpatests.splice( index, 1 );
}

What went wrong in the script.?


Since you are splice-ing on the same array, you need to pass $index itself instead of gpa[$index].id to the removeGPAScore function. Like this,

<span ng-click="removeGPAScore($index)"> x </span>