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”按钮删除行，但是从我的所有项目中的数组中删除元素。我想删除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

您需要在行中添加ngIf指令：

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

您可以将对象传递给控制器中的removeItem函数：

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-repeat上使用过滤器来实现此目的：

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

通过将dataItem的isDeleted属性（dataInvoce.Invoicetoitem.items的任何行）设置为true，过滤器将删除包含属性isDeleted：true的所有行。

执行此操作将保持正确的显示行为，同时保留从显示中删除的行。

ng-repeat filter

的参考资料

Answer 3

使用toggle（）隐藏或显示行

$( "selector" ).toggle();

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

Answer 4

使用ng-if可获得更好的效果。不是额外观察者的问题。

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

内部控制器$scope.removeItem方法集dataItem.isDeleted = true;也通过dataItem而不是$index

Angularjs：如何删除动态表行，但不从数组

4 个答案: