it-swarm.com.ru

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

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

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

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

11
Amal Antony

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');
    }
  });
10
Davin Tryon

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

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

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

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

    $scope.add = function() {
        $rootScope.items.Push('wazzzup');
    }
});
1
Fabien Thetis