Question

我对Angular（不是Javascript）很新，所以如果我没有使用正确的条款/程序，我会道歉。

我有一个这样的模型：

BuyingGroups: {
   availableBuyingGroups: [
      obj1: {
         ID: XX,
         Title: XX
      },
      ....
   ],
   affiliatedBuyingGroups: [
      obj1: {
         ID: XX,
         Title: XX
      },
      ....
   ]
}

有（2）个窗格（将它们视为列表框）。用户可以从左窗格向右添加对象，反之亦然。基本上我只是将对象从一个组移动到另一个组。

在加载时，我会使用那些（2）列表，并使用angular.copy将这些列表复制到另一个静态列表中，以免影响原始列表（我读到的是使用了上下文，如果您不使用angular.copy）。

开启复位（取消按钮）时，我将原始列表重置为复制（保持原始状态）。 问题在于取消按钮事件，列表似乎是＆＃34;重复＆＃34;本身大约0.3秒，在窗格上闪烁，然后恢复到原来的状态（在页面加载时）。

我试图清除阵列，设置超时等，但似乎没有任何效果。是否（或应该）有更有效，更好的方法来做到这一点？也许我不完全理解角度在变化时如何与$scope绑定？

self = $ scope（fyi）

self.companyBuyingGroups = response.data.BuyingGroups;
self.staticCompanyBuyingGroupsModel = angular.copy(self.companyBuyingGroups);
self.staticCompanyAffiliationsModel = angular.copy(self.companyAffiliations);

HTML

<!-- affiliated instance -->
<li ng-repeat="group in companyBuyingGroups.affiliatedBuyingGroups">
    .....
</li>

重置按钮功能

self.resetBuyingGroupsForm = function () {
     self.companyBuyingGroups.affiliatedBuyingGroups = [];
     self.companyBuyingGroups.availableBuyingGroups = [];

     //setTimeout(function () {
          self.companyBuyingGroups.affiliatedBuyingGroups = angular.copy(self.staticCompanyBuyingGroupsModel.affiliatedBuyingGroups);
          self.companyBuyingGroups.availableBuyingGroups = angular.copy(self.staticCompanyBuyingGroupsModel.availableBuyingGroups);
          //self.companyBuyingGroups = angular.copy(self.staticCompanyBuyingGroupsModel);
     //}, 50)
}

修改

我试图在重置之前清除阵列，同时不清除它们。我的阵列也非常小（少于50个对象）。

要在取消功能上解释更多＆＃34;闪烁＆＃34;，右侧窗格似乎添加了副本（而不是使用原始版本）。意思是，如果原始列表有3个项目，并且我从左侧窗格中添加了一个项目（使其成为4），则调用cancel函数，右侧窗格显示约7个项目约0.3秒，然后恢复为3个项目（这是原来的。）

Answer 1

您应该将track by group.ID附加到ng-repeat表达式，这将允许AngularJS在列表重置时重用DOM，这将解决问题。

重置列表时，Angular首先需要从DOM中删除每个项目（因为它们不再在数组中），然后再添加它们。使用track by group.ID将允许ngRepeat按ID而不是引用跟踪它们，现在它知道要删除哪个项目以及要保留哪个项目。

Answer 2

<强>＃1

它可能会闪烁，因为您先清空阵列。

尝试在重置功能中评论=[]的前两个作业，并仅保留两个angular.copy作业。

<强>＃2

如果您有可能需要时间重新渲染的大型列表，请考虑将控制器中的数组模型与初始模型进行比较 - 查找并保留已呈现的列表项，并仅添加/删除不相应的列表项

AngularJS - 取消时重置数组在范围刷新时具有闪烁效果

2 个答案: