Question

我有一个html表，其表数据连接到具有一堆对象的数组（例如：{key：abc，value：100}，{key：ac，value：200}）。我正在使用angularjs并借助ng-repeat指令我用这个数组填充我的表数据。此外，我在应用程序中还有一个功能，有一个下拉列表，当用户从此下拉列表中选择一个项目时，它会被推送到我的对象数组，因为数组被绑定到我的表，所以表格会动态更新。类似的是删除程序。现在，我的问题是用户一次只添加或删除一个项目，并且由于模型的变化，整个表格从头开始重新渲染，但我需要添加/删除一行。我的意思是我需要附加过去状态和当前状态的差异，但实际上我正在重新渲染整个表，这在计算上非常昂贵。有没有办法可以避免它？正如我所说，我正在使用Angular。我没有在Facebook上使用过React，但是我在某个地方阅读了类似的差异概念。

这是一些代码：连接到selectedProducts数组的HTML文件中的表。

<table class="table table-condensed table-bordered table-striped" ng-show="selectedProducts.length>0">

HTML文件中的下拉列表，它将所选项目添加到selectedProducts数组。

<select id='select_product' class='form-control' ng-model="selected_product" ng-options="product.key for product in products" ng-change="selectedProducts.push(selected_product)"></select>

这是表行的处理方式：

<tr ng-repeat="selected_product in selectedProducts track by $index">
     <td>{{selected_product.key}}</td>
     <td>{{selected_product.value}}</td>
     <td><a href ng-click="selectedProducts.splice($index, 1)">X</a></td>
</tr>

js文件中定义的数组：

$scope.selectedProducts = [];

Answer 1

删除产品时，

$ index会在很多行中发生变化，因此至少会重新渲染这些行。如果selected_product.key总是唯一的，那么你应该跟踪它。

此外，根据此处接受的答案，您应该避免使用$ index进行拼接：How do I delete an item or object from an array using ng-click?

取而代之的是：

ng-click="remove(selected_product)"

和

$scope.remove = function(item) { 
  var index = $scope.bdays.indexOf(item)
  $scope.bdays.splice(index, 1);     
}

使用Angularjs时如何防止重新呈现整个html表

1 个答案: