Перезагрузить измененный контент, созданный с помощью 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

EDIT:

Эта функция вызывается при добавлении элемента:

$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

Просто назначьте новые данные ответа с вашего сервера в $ scope.allElements, и они будут обновлены без перезагрузки страницы.

Answer 2

Вам не нужно беспокоиться об обновлении страницы. Если ваше представление подключено к контроллеру, чья область действия $ обновляется вызовами 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 3

используйте trackby x.id для обновления представления без обновления всей страницы