Динамическая перезагрузка ng-повторных данных в DOM

У меня есть следующий код на мой взгляд:

<li ng-repeat="i in items">{{i.id}}</li>

Я бы хотел, чтобы ng-repeat запускался динамически, когда новые значения добавляются/удаляются из items. Как и в случае, если новый элемент добавлен в начало items, тогда он должен динамически отображаться в DOM в начале и аналогичным образом, если элемент добавлен в конец items, этот элемент должен отображаться как последний Элемент списка. Является ли это динамическое изменение DOM возможным в angular?

Ответ 1

ng-repeat должен работать таким образом из коробки. Тем не менее, вам нужно push или unshift в массиве, чтобы у вас были правильные часы. Angular будет отслеживать массив по ссылке.

Вот рабочий плункер.

HTML:

<html ng-app="myApp">

  <head>
    <script data-require="[email protected]*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <h1>Hello Plunker!</h1>
    <div ng-repeat="item in items">
      {{ item }}
    </div>
    <button ng-click="add()">Add</button>
  </body>

</html>

JS:

var myApp = angular.module('myApp', []);

myApp.controller('Ctrl', function($scope) {

    $scope.items = ['hi', 'hey', 'hello'];

    $scope.add = function() {

      $scope.items.push('wazzzup');
    }
  });

Ответ 2

Вы можете использовать $rootScope вместо $scope для установки элементов свойств.

Таким образом, свойство является глобальным и будет обновляться.

myApp.controller('Ctrl', function($scope, $rootScope) {

    $rootScope.items = ['hi', 'hey', 'hello'];

    $scope.add = function() {
        $rootScope.items.push('wazzzup');
    }
});