Angularjs:How to remove dynamical table row, but no remove from array

Question

This down is small from my html code.The code add/remove dynamical row.

 <tr class="clone" ng-repeat="dataItem in dataInvoce.Invoicetoitem.items track by $index">
                <td class="number">{{$index + 1}}</td>
    <td><input type="text" id="codeto{{$index}}"  size="11" ng-model="dataItem.item.code" ng-keyup="getCodeItem($index)" class="tagsItem">
                <td><input type="hidden" id="hidden{{$index + 1}}"   ng-model="dataItem.item.itemID" >
                    <input type="text" ng-model="dataItem.item.itemName"  id="item{{$index}}"  class="tagsItem" ng-keyup="getItemInvoice($index)"  name="itemName" required></td>
                <td><input type="text" ng-model="dataItem.item.solid" size="11" id="solid{{$index + 1}}"   ng-disabled="invoice.itemName.$error.required"    required></td>
                <td><input type="text"  ng-model="dataItem.quantity" id="quantity{{$index+1}}" ng-keyup="totals($index+1)" size="10"  ng-disabled="invoice.itemName.$error.required" required></td>
                <td><input type="text" ng-model="dataItem.price"    ng-keyup="totals($index+1)" value="111" id="price{{$index + 1}}"  ng-disabled="invoice.itemName.$error.required" required></td>
    <td><input type="text" ng-model="dataItem.discount"  id="discount{{$index+1}}" ng-keyup="totals($index+1)" size="11" ng-disabled="invoice.itemName.$error.required" required></td>
                <td>{{dataItem.quantity * dataItem.price * (1 - dataItem.discount / 100) | number:2}}</td>
                <td><a class="btn btn-default" ng-click="removeItem ($index)">-</a></td>

            </tr>

This is my funciton for remove dynamical row.When click on "removeItem" button removen row, but and removen element from array on my all items. I want to remove dynamicla row, but do not delete element from my array with all items.

$scope.removeItem = function (index)
{
console.log($scope.dataInvoce.Invoicetoitem.items);

$scope.dataInvoce.Invoicetoitem.items.splice (index, 1);

console.log($scope.dataInvoce.Invoicetoitem.items);
$scope.total ($scope.dataInvoce.Invoicetoitem.items);
};

You can just put css display = none to the row or how @SSH said just ng-show or ng-hide — Sergi Case
– Sergi Case, Commented Apr 27, 2016 at 14:39
Ng-show How will you know which row to delete, i have ng-repeat row over from one . — Стилиян Георгиев
– Стилиян Георгиев, Commented Apr 27, 2016 at 14:45

Alon Eitan · Accepted Answer · 2016-04-27 14:52:44Z

1

You need to add ngIf directive to the row:

 <tr class="clone" ng-repeat="dataItem in dataInvoce.Invoicetoitem.items track by $index" ng-if="!dataItem.deleted">

And you can pass the object to the removeItem function in the controller:

ng-click="removeItem (dataItem)" <!-- Instead of '$index' -->

And change the controller function:

$scope.removeItem = function (dataItem) {
    console.log($scope.dataInvoce.Invoicetoitem.items);
    dataItem.deleted = true;
    var total = $scope.dataInvoce.Invoicetoitem.items.filter(function(item) { return typeof(item.deleted) === 'undefined' || !item.deleted; });  // get only the undeleted items

    $scope.total (total);
};

answered Apr 27, 2016 at 14:52

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

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

11 Comments

Стилиян Георгиев Over a year ago

Hi your script is Perfect work, but have anorther problem: After i click on removeItem (), my result in html code have problem.After Ng-repeat my result are: 1 some text,2 some text ,3 some text.After click on function i deleted result (2) i see: 1 some text, 3 some text.

Alon Eitan Over a year ago

@СтилиянГеоргиев Hey, in that case, you can remove the ngIf and add to the ngRepeat a filter that will show only the un-deleted items: ng-repeat="....... | filter: { 'deleted': '!true'} IMPORTANT!!! - You MUST NOT trust $index as a reference to an item inside dataInvoce.Invoicetoitem.items because it's actually the index of the filtered list. You need to convert functions like ng-keyup="getItemInvoice($index)" to ng-keyup="getItemInvoice(dataItem)" to avoid unexpected behaviours

Стилиян Георгиев Over a year ago

Hey this work in half.I click on function ( removeItem ), but no deleted table row in my html.

Alon Eitan Over a year ago

You mean that after you click on the remove button, you can still see the row in the view?

Стилиян Георгиев Over a year ago

I am very sorry for the stupid mistake, even if I did not see that there really is a difference! Many, many thanks- Now all work perfect !

|

Community · Accepted Answer · 2017-05-23 12:07:56Z

0

I think what you want is a soft delete in angularjs.

you can achieve this by using a Filter on your ng-repeat:

<tr class="clone" ng-repeat="dataItem in dataInvoce.Invoicetoitem.items track by $index | filter: { 'isDeleted': 'false'}">...</tr>

By setting the isDeleted property of dataItem (any rows of dataInvoce.Invoicetoitem.items) to true, the filter will remove all of the rows that contain the property isDeleted : true.

Doing this will have the correct display behaviour while keeping the rows that are removed from display.

reference for ng-repeat filter

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Apr 27, 2016 at 14:50

Jun Duan

2181 silver badge9 bronze badges

1 Comment

Alon Eitan Over a year ago

Beware of using $index and filter - It will get the index of the filtered collection, and not the original index of the item

Ankit Pundhir · Accepted Answer · 2016-04-27 14:56:37Z

0

Use ng-if for better performance. Not a issue of extra watcher.

<tr class="clone" ng-repeat="dataItem in dataInvoce.Invoicetoitem.items track by $index" ng-if="dataItem.isDeleted">

inside controller $scope.removeItem method set dataItem.isDeleted = true; also pass dataItem rather than $index

answered Apr 27, 2016 at 14:56

Ankit Pundhir

1,0978 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angularjs:How to remove dynamical table row, but no remove from array

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related