javascript - 在 View 中使用编译指令和 ng-repeat 的组合可防止正确更新范围元素列表

Question

这是我在 plunker 上的代码(链接已更新)，很抱歉，我无法使其再次工作，因为它在我的项目中工作，但它有助于阅读目的，而不是在此处粘贴我的代码。

$scope.elements = [
{
  'value': 'Default text', 
  'elem_type_name': 'text field'
}, {
  'value': 'example@email.com', 
  'elem_type_name': 'email field'
}];

事实上，最初我的代码可以工作，并且我能够很好地呈现正确的 View ，但是在我的代码中，我的页面底部有一个提交按钮。

当点击它时，它会生成一个新的 API 调用来更新我当前的作用域变量(元素列表)。

其中一些可能会在 API 调用后保留，一些可能会被删除，一些新的可能会被添加。

不幸的是，当我点击这个提交按钮时，奇怪的是，范围没有得到很好的分析，所以如果相同的元素保持相同的 id，它就会被重复。如果我得到一个全新的元素列表，我将看到以前的元素+新的元素。

看来我也有同样的问题:Another stackoverflow question但就我而言，每次单击按钮后，我需要在每次 API 调用之前完全清空 elements 作用域变量。

你有什么想法吗？

提前非常感谢

Answer 1

在您的通话中，您可以设置$scope.elements = ''，然后您可以分配$scope.elements = response.data，或者您的任何内容将结果定义为。例如:

$http.get('jsonFile.json')
    .then(function(jsonData) {
        $scope.elements = '';
        $scope.elements = jsonData.data;
    });

这将清理 $scope.elements，然后仅使用新的响应数据进行更新。