angularjs - example - ng-repeat order by

ng-repetir con la pista por más de múltiples propiedades

Question

Tengo un problema con la directiva de repetición angular ng. Actualmente trabajo en un proyecto en el que, desde la API, obtengo una lista de elementos (algunas veces podría ser 1k elementos) y esta lista se debe actualizar cada 5 segundos (se trata de un proyecto relacionado con la supervisión).

Cuando la longitud de la lista es un poco más grande, el sitio web mientras se vuelve a representar el DOM podría "disminuir". Resulta que la regeneración angular de todo el DOM (¡pero el 95% del artículo es el mismo!)

Uno de los posibles enfoques es establecer la expresión "seguimiento por", por ejemplo, en item.id. Pero aquí viene otro problema, también quiero regenerar elementos cuando, por ejemplo, las descripciones fueron cambiadas por otro usuario. Dado que el seguimiento por es la expresión de item.id, los cambios en item.description no actualizaron el item en DOM.

¿Hay manera de rastrear a través de múltiples propiedades? Tal vez alguna función? ¿O tal vez la comparación por "mano"?

Cualquier idea, ejemplos de código que agradecería :)

ACTUALIZAR

Lo que descubrí cuando establecí la pista en item.id angular no volvió a crear html para los elementos, solo actualizo el valor en el elemento ya creado y parece ser "más rápido" que luego se elimina y se crea. Anteriormente pensé un poco diferente.

FIJAR

Para aquellos que buscan un mejor rendimiento en más de 1k artículos en ng-repeat USE track by item.id aumentará su rendimiento;)

Answer 1

Como el comentario sugiere, puedes probar algo como esto:

<select ng-model="item" ng-options="item.id as item.description for item in items track by itemTracker(item)">

En su controlador:

$scope.itemTracker= function(item) {
  return item.id + ''-'' + item.description;
}

Esto podría ayudar con la cantidad de elementos DOM que se vuelven a representar cuando la lista cambia.

Answer 2

No es necesario crear una función para manejar el seguimiento por múltiples propiedades. Tu puedes hacer:

<div ng-repeat="item in lines track by item.id+item.description">

Answer 3

Según mi conocimiento, el modelo angularjs está vinculado a la vista de la interfaz de usuario, por lo que el modelo se redireccionará mediante $ apply o $ digest una vez que el valor haya cambiado. por lo tanto, en su caso, puede vincular el valor del modelo a la vista de la interfaz de usuario, pero tampoco desea volver a renderizar la vista si el valor no ha cambiado, eso es imposible. Esto es lo que sé.

sin embargo, puedes manipular el elemento dom. por ejemplo almacenar los datos en una variable

var x = [{id:"id1",value:"v1"},{id:"id2",value:"v2"}]

en html, agregue manualmente o use la directiva para adjuntar, luego asigne el id al elemento,

<div id="id1">v1</div>

Compruebe y compare el valor, basado en sus necesidades. una vez encontrado, luego angular.element ("# yourid"). text ()

Esto solucionará los problemas de consumo de recursos de su navegador.