web-dev-qa-db-fra.com

Rechargement dynamique de données ng-repeat dans le DOM

J'ai le code suivant à mon avis:

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

Je voudrais que le ng-repeat soit déclenché de manière dynamique lorsque de nouvelles valeurs sont ajoutées/supprimées de items. De même, si un nouvel élément est ajouté au début de items, il doit être rendu dynamiquement au DOM au début et de la même manière, si un élément est ajouté à la fin de items, cet élément doit être restitué comme dernier élément de la liste. Ce changement dynamique du DOM est-il possible en angulaire? 

javascriptangularjsangularjs-ng-repeatangular-ui
11
Amal Antony

ng-repeat devrait fonctionner de cette façon hors de la boîte. Cependant, vous devez Push ou unshift dans la matrice pour que la montre correcte se déclenche. Angular suivra le tableau par référence.

Voici un plunker de travail .

HTML:

<html ng-app="myApp">

  <head>
    <script data-require="angular.js@*" 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

Vous pouvez utiliser $ rootScope au lieu de $ scope pour définir les éléments de propriété.

De cette façon, la propriété est globale et sera mise à jour.

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

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

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