<!-- Plik: r02/ng-repeat-track-by-id.html -->
<html ng-app="notesApp">
<meta charset="utf-8">
<body ng-controller="MainCtrl as ctrl">

  <button ng-click="ctrl.changeNotes()">Zmień uwagi</button>
  <br/>
  Elementy DOM zmieniają się po każdym kliknięciu przez użytkownika
  <div ng-repeat="note in ctrl.notes1">
    {{note.$$hashKey}}
    <span class="label"> {{note.label}}</span>
    <span class="author" ng-bind="note.done"></span>
  </div>

  <br/>
  Elementy DOM zostają ponownie użyte po każdym kliknięciu przez użytkownika
  <div ng-repeat="note in ctrl.notes2 track by note.id">
    {{note.$$hashKey}}
    <span class="label"> {{note.label}}</span>
    <span class="author" ng-bind="note.done"></span>
  </div>

<script
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js">
</script>
<script type="text/javascript">
  angular.module('notesApp', [])
    .controller('MainCtrl', [function() {
      var self = this;
      var notes = [
        {
          id: 1,
          label: 'Pierwsza uwaga',
          done: false,
          someRandom: 31431},
        {
          id: 2,
          label: 'Druga uwaga',
          done: false},
        {
          id: 3,
          label: 'Zakończona trzecia uwaga',
          done: true
        }
      ];
      self.notes1 = angular.copy(notes);
      self.notes2 = angular.copy(notes);
      self.changeNotes = function() {
        notes = [
          {
            id: 1,
            label: 'Zmieniona uwaga',
            done: false,
            someRandom: 4242
          },
          {
            id: 2,
            label: 'Druga uwaga',
            done: false
          },
          {
            id: 3,
            label: 'Zakończona trzecia uwaga',
            done: true
          }
        ];
        self.notes1 = angular.copy(notes);
        self.notes2 = angular.copy(notes);
      };
    }]);
</script>
</body>

</html>
