Angular js remove table row not working

Question

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.?

You mean you want to remove dom element or remove data associated with that row — Jayant Patil
– Jayant Patil, Commented May 15, 2017 at 7:57

tanmay · Accepted Answer · 2017-05-15 08:06:40Z

1

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>

answered May 15, 2017 at 8:06

tanmay

7,9112 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mohammad Fareed Over a year ago

When I Delete it its still removes the other rows. can you please create a JS fiddle for me.

Mohammad Fareed Over a year ago

Can you add more Script to this plnkr please

Mohammad Fareed Over a year ago

it's still removing all the rows after that particular id. I think my add more script has some issue.

Mohammad Fareed Over a year ago

Yes, i Found Issue in Add Script. i have give wrong model name

tanmay Over a year ago

@Developer glad you found it.. hope it is working now

Vidhya Sagar Reddy · Accepted Answer · 2017-05-15 08:02:07Z

0

Why is that ng-click="removeGPAScore(gpa[$index].id)"> ?

Mention it as: ng-click="removeGPAScore(gpa[$index])">

answered May 15, 2017 at 8:02

Vidhya Sagar Reddy

1,6411 gold badge14 silver badges26 bronze badges

1 Comment

Mohammad Fareed Over a year ago

is my add row script is correct .? can you optimize it.

Mohammad Fareed · Accepted Answer · 2017-05-15 10:16:37Z

0

Replace ng-model="gpa[$index].date" with Use ng-model="gpa.date"

Then Use

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

answered May 15, 2017 at 10:16

Mohammad Fareed

1,9746 gold badges31 silver badges61 bronze badges

Collectives™ on Stack Overflow

Angular js remove table row not working

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related