<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example37-production</title>
<style type="text/css">
a[ ng-click ] {
cursor: pointer ;
text-decoration: underline ;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body >
<div ng-app="debounceExample">
<div ng-controller="ExampleController">
<p> 1. this does not work because since angular 1.1.4 you can not duplicate exact items in a ng-repeat
</p>
<ul>
<p>
"li ng-repeat="item in [1, 2, 3, 3]"> { item } /li>"
</p>
</ul>
<p> 2. sin embargo puedes hacerlo si haces que el watch del ng-repeat se haga sobre el index en vez de sobre todo el item
</p>
<ul>
<li ng-repeat="item in [1, 2, 3, 3] track by $index">
{{ item }}
</li>
</ul>
<p>3. tambien dara error si pones los filtros por detras del track by</p>
<p>4. cuando son objetos</p>
<ul>
<li ng-repeat="person in people track by $index">
{{ person.name }} - {{ person.age }}
</li>
</ul>
<input type="number" ng-model="person" placeholder="person"/>
<input type="text" ng-model="people[person].name" placeholder="name"/>
<input type="number" ng-model="people[person].age" placeholder="age"/>
<p>Cuando no usas trackBy, angular lo trackea automaticamente por una propiedad que crea, $$hashKey. </p>
<p>Cuando cambias los datos del objeto, si no usas trackBy, el array de elementos es destruido junto con
la lista y se vuelve a crear, como veras en la consola del siguiente ejemplo, incluso aunque los objetos sean identicamente iguales,
al anadir esta propiedad los hace unicos, por lo que nunca puedes tener la misma referencia del objeto. En algun caso puede ser necesario,
pero la mayor parte de veces es costoso y pesado para el rendimiento de la aplicacion. </p>
<p> En cambio, cuando usas trackBy los elementos del DOM permanecen, aunque sus propiedades
</p>
<h2> Without Track-By </h2>
<ul>
<li ng-repeat="friend in friendsOne" bn-log-dom-creation="Without">
{{ friend.id }} — {{ friend.name }}
</li>
</ul>
<h2> With Track-By </h2>
<!--
This time, we're going to use the same data structure;
however, we're going to use the "track by" syntax to tell
AngularJS how to map the objects to the DOM node.
NOTE: You can also use a $scope-based function like:
... track by identifier( item )
-->
<ul>
<li ng-repeat="friend in friendsTwo track by friend.id" bn-log-dom-creation="With">
{{ friend.id }} — {{ friend.name }}
</li>
</ul>
<p> <a ng-click="rebuildFriends()">Rebuild Friends</a> </p>
<p> Ejemplo completo en > <a href="http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm">Explicacion y video</a> - <a href="http://bennadel.github.io/JavaScript-Demos/demos/track-by-ngrepeat-angularjs/">Ejemplo</a></p>
<br>
<p> Otro ejemplo en <a href="http://jsfiddle.net/SeKk7/">Ejemplo 2</a></p>
</div>
</div>
</body>
</html>
(function(angular) {
'use strict';
angular.module('debounceExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.people = [{'name':'Paco', 'age':23},{'name':'Pepe','age':25},{'name':'Luis','age':30}]
// Set up the initial collections.
$scope.friendsOne = getFriends();
$scope.friendsTwo = getFriends();
// ---
// PUBLIC METHODS.
// ---
// I rebuild the collections, creating completely new
// arrays and Friend object instances.
$scope.rebuildFriends = function() {
console.log( "Rebuilding..." );
$scope.friendsOne = getFriends();
$scope.friendsTwo = getFriends();
// Log the friends collection so we can see how
// AngularJS updates the objects.
setTimeout(
function() {
console.dir( $scope.friendsOne );
console.dir( $scope.friendsTwo );
},
50
);
};
// ---
// PRIVATE METHODS.
// ---
// I create a new collection of friends.
function getFriends() {
return([
{
id: 1,
name: "Sarah"
},
{
id: 2,
name: "Tricia"
},
{
id: 3,
name: "Joanna"
}
]);
}
}])
// -------------------------------------------------- //
// I simply log the creation / linking of a DOM node to
// illustrate the way the DOM nodes are created with the
// various tracking approaches.
.directive("bnLogDomCreation",
function() {
// I bind the UI to the $scope.
function link( $scope, element, attributes ) {
console.log(
attributes.bnLogDomCreation,
$scope.$index
);
}
// Return the directive configuration.
return({
link: link
});
}
);
})(window.angular);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/