Javascript Question

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

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="" 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 - / 100) | number:2}}</td>
<td><a class="btn btn-default" ng-click="removeItem ($index)">-</a></td>


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)

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

$ ($scope.dataInvoce.Invoicetoitem.items);

Answer Source

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) {
    dataItem.deleted = true;
    var total = $scope.dataInvoce.Invoicetoitem.items.filter(function(item) { return typeof(item.deleted) === 'undefined' || !item.deleted; });  // get only the undeleted items

    $ (total);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download