Question

当前正在处理我正在执行API调用以获取数据，然后使用ng-repeat指令在视图上填充表的应用程序。

<tr md-row ng-repeat="request in requests">
        <td md-cell>{{request.name}}</td>
        <td md-cell>{{request.email}}</td>
        <td md-cell>{{request.application_name}}</td>
        <td md-cell>{{request.created_user}}</td>
        <td md-cell>{{request.request_type}}</td>
        <td md-cell>{{request.status}}</td>
</tr>

然后在控制器中，用户发出一个新请求，并向数据库中添加一行，并且在出现成功对话框之后，我想向API发出新请求，以获取服务器生成的新行，所以我想提出一个新的API请求。

因此，我联系API并再次获得所有请求，并希望将表中的数据替换为API中的刷新数据

API调用成功后，它将从promise中调用此函数：

var onRequests = function(response) {
  $scope.requests = [];

      response.forEach(function() {
          //Processing here and pushing to the new array
      });
  });
};

但是，在创建这个新数组时，我假设对ng-repeat件的作用域具有原始数组的引用丢失了。

因此，我正在尝试找到一种方法来用新数组刷新ng-repeat表。

这是我尝试过的事情：

新数组，然后$apply ing
保留相同的数组引用，只是删除所有内容并执行再说一遍，但这似乎是一种怪诞的方式，我想要一个优雅的解决方案
使用$ rootScope代替数组，这似乎对某些情况有用原因...

这就是我做的$ rootScope的工作方式，它可以工作（但似乎很笨拙）：

 var onRequests = function(response) {
      $rootScope.requests = [];

          response.forEach(function() {
              //Processing here and pushing to the new array
          });
      });
    };

出于某种原因这可行，我不知道为什么会这样。这就是为什么我不明白。

问题：当我进行api调用时，将调用此函数并将$scope.requests设置为空数组（这会更改地址/丢失的引用吗？），并且然后用来自API的新数据填充。我想知道这是否不会使用新数据更新ng-repeat子作用域。

我知道通常如果您更改ng-repeat $scope数组，它应该更新DOM，但是由于我将其设置为一个空的新数组，然后填充该新数组，因此它似乎正在丢失对该数组的引用。这就是为什么我去弹出数组中的每个元素而不是将其设置为全新的空数组（例如$scope.requests = [];

我想要什么

无论这是否是解决问题的最佳方法。我要做的只是用API调用中的新数据更新ng-repeat表。

如果有人可以帮助我，那就太好了。我已经阅读了类似的其他问题，但似乎找不到任何有用或准确的方法，从我发现的结果来看，它没有用。

编辑：为了清楚起见，我已经阅读了大约十多个其他措辞相似的帖子，但都不完全符合我所说的内容，因此在标记为重复，知道很多其他方法都不能作为解决方案。

Answer 1

听起来这是您的问题：

因此，我正在尝试找到一种方法来刷新ng-repeat表带有新数组。

简短的答案是这样的：

$scope.requests = newArrayOfRequests;

或者，您所拥有的也可以：

//clear the array. I don't why you would need a reference to the old array,
// but if you do, then
//$scope.old = requests;
//then
$scope.requests = [];

response.forEach(function() {
  // do your processing
  $scope.requests.push(processedRow)
});

就是这样。在AngularJS中，这就是您要做的全部。这就是AJS绑定的魔力。

现在，将track by与ng-repeat结合使用可以提高性能。但是，您只需要做的就是刷新ng-repeat。

更长的答案与DOM节点有关。 AJS确实会使用它创建的通用ID来跟踪添加到ngRepeat的每件事（如果您在开发工具中检查表，则实际上可以将这些ID视为属性）。但是，除非将这些ID映射回您的数据，否则这对您没有帮助。幸运的是，您可以使用track by指定它使用实际数据中的唯一ID：

<tr md-row ng-repeat="request in requests track by request.some_unique_id">
        <td md-cell>{{request.name}}</td>
        <td md-cell>{{request.email}}</td>
        <td md-cell>{{request.application_name}}</td>
        <td md-cell>{{request.created_user}}</td>
        <td md-cell>{{request.request_type}}</td>
        <td md-cell>{{request.status}}</td>
</tr>

这样做是为了允许AJS重新使用从第一次加载数据起它先前创建的DOM节点，而不是每次加载新数据时都重新创建它们。

当您加载新数组时，AJS只需要更新每行的值，或者，对于您的情况，它只需要为API返回的新行添加一个DOM节点

但这不会改变数据的刷新方式。只需为$scope变量分配一个新数组，或清除它并推送新数据。这就是全部。

使用新的API调用进行AngularJS ng-repeat刷新

我想要什么

无论这是否是解决问题的最佳方法。我要做的只是用API调用中的新数据更新ng-repeat表。

1 个答案: