angularjs ng-repeater dynamically delete data

Question

I have a situation where users added sample data as shown in figure. How can I add Delete button which deletes particular sample ONLY. From figure , I want 'Delete Sample 1" to delete Sample 1 records only.

Thanks

Code triggered when Add Sample button is clicked

$scope.addSample = function () {

    $scope.partdetails = [
  {
      "sampleseq": 0,
      "sampleid": 1,
      "attribute": "Height",
      "measureunit": "Centimeter",
      "actualvalue": null,
      "lowerspec": 1.23,
      "upperspec": 3.23,
      "notes": null
  },
  {
      "sampleseq": 0,
      "sampleid": 2,
      "attribute": "Diameter",
      "measureunit": "Inches",
      "actualvalue": null,
      "lowerspec": 1.23,
      "upperspec": 3.23,
      "notes": null
  }
    ];

    $scope.partdetails[0].sampleseq = $scope.sampleCount;
    $scope.partdetails[1].sampleseq = $scope.sampleCount;

    $scope.partdetailsList.push($scope.partdetails[0]);
    $scope.partdetailsList.push($scope.partdetails[1]);

    $scope.sampleCount += 1;
}

Please include a sample of the data structure and the HTML for the view. — georgeawg
– georgeawg, Commented Jan 12, 2017 at 20:10
Where you want to add delete button in row or top of the table? Also when user click on delete-1 then you want to remove all samples whose id is 1 ? Is that correct? basic example is here jsfiddle.net/crrypdLj/1 — user3249448
– user3249448, Commented Jan 12, 2017 at 20:42
when I say sample 1 , that means first 2 top rows. Only these rows needs to be deleted as they belong to sample 1 . Not all rows. Unfortunately the jsfiddle link deleted single row at a time. — bp581
– bp581, Commented Jan 12, 2017 at 20:46
Where is the button ? in the row or at the top? here is updated sample with single row and with multiple row jsfiddle.net/crrypdLj/2 — user3249448
– user3249448, Commented Jan 12, 2017 at 21:06
Thanks for your efforts in helping me. I was able to resolve the the issue using this link. coderwall.com/p/fnp2oq/… — bp581
– bp581, Commented Jan 12, 2017 at 21:09

bp581 · Accepted Answer · 2017-01-12 21:19:54Z

0

This link has the solution just modify the list accordinlgy

https://coderwall.com/p/fnp2oq/use-ng-repeat-on-tbody-to-create-summary-rows-for-nested-data

answered Jan 12, 2017 at 21:19

bp581

8691 gold badge17 silver badges47 bronze badges

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

Comments

svarog · Accepted Answer · 2017-01-12 22:02:19Z

0

You can use Array.prototype.filter to get a new data record without the items that fail a predicate function

Lets say your delete button calls a function called deleteSample and passes it a sample id:

HTML:

... ng-repeat="row in records" ...

<button ng-click="deleteSample(row.sampleid)">Delete sample</button>

Controller:

$scope.deleteSample = function(sampleId) {
    $scope.records = $scope.records.filter((row)=> {
        return !angular.equals(sampleId, row.sampleid)
    });
}

Of course that doesn't solve the issue that you would probably need to remove the rows in your db too.

edited Jan 12, 2017 at 22:02

answered Jan 12, 2017 at 21:55

svarog

9,8775 gold badges66 silver badges79 bronze badges

Collectives™ on Stack Overflow

angularjs ng-repeater dynamically delete data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related