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

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

Answer 2

只需将来自服务器的新响应数据分配给$ scope.allElements，它将刷新而无需重新加载页面。

Answer 3

您不必担心刷新页面。如果您的视图连接到控制器，该控制器的$ scope通过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>

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

3 个答案: