重新加载更改了通过ng-repeat创建的内容，而无需刷新整个页面

Question

我正在尝试做以下事情，遗憾的是没有任何成功：

基本上，我有一个对象数组，对于每个对象，通过ng-repeat指令动态创建一个按钮。单击按钮时，新对象将附加到提到的数组（数据将通过api调用发送到服务器，服务器将在内部更新列表并发送新数组，并将新对象附加回视图）。

删除该数组中的元素也是如此。

这是我的意思的一些示例代码：

<span ng-repeat="x in allElements">
    <button class="btn btn-primary" id="elementButtons">{{x.id}}</button>
</span>

$ scope.allElements中的元素将有尽可能多的按钮。

然后还有这个按钮，它基本上导致数组重置为0个元素：

<button id="clearAllElements" type="button" class="btn btn-danger" 
data-toggle="button" ng-click="deleteAllElements()">Clear all</button>

$ scope.deleteAllElements（）函数调用api从服务器中删除所有元素，并从服务器获取新的（空）数组，并将其分配给$ scope.allElements。

现在，如何在不刷新整个页面的情况下更新视图，以便只重新创建创建的按钮？

在此先感谢您的任何答案，

a.j.stu

编辑：

这是在添加元素时调用的函数：

$scope.addElement = function(elementName) {
    if ($scope.checkElementName(elementName)) {
        var data = {"name": elementName.toUpperCase(),
                    "type": /*retrieve type of element from html element*/}

        $http.post("api/addElement/", JSON.stringify(data))
         .then(function(response) {
             $scope.allElements = response.data; //the api call adds the element in the backend and returns an array with all elements appended the new one. This SHOULD refresh the view of all element buttons, but doesn't.
         })
         .catch(function(response) {
             console.log("something went wrong adding element " + elementName); 
         })
         .then(function(response) {
           $('#newElementModal').modal('hide'); //#newElementModal is the modal that pops up when clicking a button to add a new element. here the name and type of the element are set and used in the api call above to add the element. Basically, when the modal hides, the view of all buttons should be refreshed.
         });
     } else {
        console.log("invalid identifier of element.");
}

据我所知，.then（）调用是异步的。但是，如果在api调用之后只有.then（）调用，这应该不是问题，对吧？

Answer 1

您不必担心重新刷新页面。如果您的视图连接到控制器，其范围由API调用添加和删除元素更新，则视图将调整并显示新内容。

对于它的价值，这里有一个片段，展示它是如何工作的。减去添加/删除数据的API调用。

angular.module('dummyApp', [])
  .controller('DummyController', function($scope) {

    $scope.allElements = [
    { id : 1, name : "Joe"},
    { id : 2, name : "John"},
    { id : 3, name : "Jane"},
    { id : 4, name : "Alice"},
    ];
    
    $scope.deleteAllElements = function () {
      // deleting elements empties the $scope.allElements array
      $scope.allElements.length = 0;
    };
    
    $scope.addElement = function () {
      var element = {
        id : generateId(),
        name : 'whatever'
      }
      // new elements are pushed into the $scope.allElements array
      $scope.allElements.push(element);
    };
    
    function generateId() {
      return Math.floor(Math.random()*1000);
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
<div ng-app="dummyApp" ng-controller="DummyController">
  <span ng-repeat="x in allElements">
    <button class="btn btn-primary" id="elementButtons">{{x.id}}</button>
  </span>
<br/><br/>
<button id="clearAllElements" type="button" class="btn btn-danger" 
data-toggle="button" ng-click="deleteAllElements()">Clear all</button>
<button id="clearAllElements" type="button" class="btn btn-danger" 
data-toggle="button" ng-click="addElement()">Add</button>
</div>

Answer 2

使用trackby x.id更新视图而不刷新整个页面

Answer 3

只需将服务器中的新响应数据分配给$ scope.allElements，它将在不重新加载页面的情况下刷新。