Angularjs：ダイナミックテーブルの行を削除するにはどうすればいいですか？配列から削除しないでください

Question

このダウンは自分のHTMLコードからは小さいです。コードは動的な行を追加/削除します。

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

これは私のすべての項目の配列から「removeItem」ボタンremoven行をクリックしますが、とremoven要素row.When削除力学のための私のfuncitonです。 dynamicla行を削除したいが、すべての項目で配列から要素を削除しないでください。

$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); 
}; 

Answer 1

ため

参照

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

そして、コントローラー機能を変更してください。

$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); 
}; 

Answer 2

あなたが望むのは、angularjsのソフト削除です。あなたはngのリピートにフィルターを使用することによって、これを達成することができます

：

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

trueにデータ項目（dataInvoce.Invoicetoitem.itemsの任意の行）のisDeletedプロパティを設定することにより、フィルタがすべて削除されますプロパティisDeleted：trueを含む行のうち、

これを実行すると、表示から削除された行を維持したまま、正しい表示動作が行われます。

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

そして、あなたはコントローラにremoveItem関数にオブジェクトを渡すことができます：あなたが行にngIfディレクティブを追加する必要がng-repeat filter

Answer 3

、パフォーマンスを向上させるために使用ng-if

$("selector").toggle(); 

http://api.jquery.com/toggle/

Answer 4

を表示または非表示の行に使用トグル（）。余分なウォッチャーの問題ではありません。コントローラ$scope.removeItemメソッド内

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

dataItem.isDeleted = true;はまた、あなたがこのためにNG-ショーディレクティブを使用することができますdataItemではなく$index