Angular directives: ng-repeat

#1 · August 23, 2020, 6:16 pm

VisualNEO Web can use any AngularJS directive. Probably the most useful is ng-repeat.
It allows to display JSON data collections in a very easy way. Plase take a look at the attached sample.

Uploaded files:

You need to login to have access to uploads.

Vadim, asmat and 2 other users have reacted to this post.

#2 · August 24, 2020, 12:11 am

@luishp

This is a real hidden gem.

I believe you had informed us about it on this forum months ago; but I had forgotten. I wonder if this could be made easier by ...

- by defining the object to be repeated (template), as a separate Container/Dialog (with html or other inner objects)
- and somehow (perhaps via a neoCommand) linking the outer Container, the inner/template Container, and the array of json objects

This kind of extended facility would make it very easy/efficient to show lists of composite objects (popularly deployed in smartphone Apps in Portrait Mode).

#3 · August 26, 2020, 3:01 pm

Hola Luis;

Excelente ejemplo. Se podría realizar sin crear el array en el momento, sino traerlo desde afuera?. Estoy experimentando con Json traído desde Wordpress y si bien funciona bastante aceptable y los datos se acceden perfectamente, este hecho de insertar un elemento dentro de un objeto container a través de un Loop que contenga por ejemplo: "Nombre del post y autor" se hace excesivamente lento.

Gracias por los descubrimientos!

#4 · August 26, 2020, 5:37 pm

Si @palamar ¡claro! Esa es la idea: puedes traer el Array JSON desde una base de datos o desde Google Sheets o desde una consulta a una API de cualquier servicio externo.

#5 · April 23, 2023, 6:28 am

@luishp interesante, podría facilitarnos un archivo .neoapp de ejemplo, para un caso desde una gsheet...?

#6 · April 23, 2023, 8:26 am

@iosoft te he respondido aquí:
https://visualneo.com/forum/topic/consulta-sobre-ng-repeat#postid-18936

Saludos

IoSoft has reacted to this post.

#7 · April 1, 2024, 4:33 am

Buenas noches, espero estén bien. Retornando a estos temas referidos a ng-repeat, mi consulta es la siguiente:

Tengo el siguiente div, muy similar al que colocaron de ejemplo:

<div id=""> [object.TEMAS]

(mediante éste, yo muestro en mi app un listado con los registros de una base de datos, exclusivamente del campo "TEMAS" ordenados alfabéticamente)

Ahora bien, lo que necesito saber es: ¿se puede especificar que me muestre todos los registros, EXCEPTO los repetidos o duplicados...? ¿Hay algún filtro del ng-repeat para ello...?

Gracias. Saludos cordiales

#8 · April 1, 2024, 9:59 am

Sí, puedes filtrar los elementos repetidos en un ng-repeat utilizando el filtro unique. Sin embargo, el filtro unique no está incluido de forma nativa en AngularJS, por lo que necesitarás implementarlo. No lo he probado, pero esto debería funcionar.
En Project > Properties > Advanced > Custom Metadata > Body incluye este código:

<script>
  // Define the filter 'unique'
  angular.module('NeoApp').filter('unique', function() {
    return function(collection, keyname) {
      var output = [],
        keys = [];

      angular.forEach(collection, function(item) {
        var key = item[keyname];
        if (keys.indexOf(key) === -1) {
          keys.push(key);
          output.push(item);
        }
      });

      return output;
    };
  });
</script>

Después modifica tu HTML para utilizar unique:

<span ng-repeat="object in biblos | filter:searchText | orderBy: 'TEMAS' | unique: 'TEMAS'">
  <div id="">&nbsp;<font size="3">[object.TEMAS]</font><br>
</span>

Fíjate también que desde hace tiempo VisualNEO Web incluye ng-repeat en el panel de Properties > Advanced, con lo que puedes utilizarlo con objetos Container directamente.

No dejes de comentar si finalmente funcionó.

Saludos.

#9 · April 1, 2024, 9:22 pm

Muchísimas gracias @luishp!!!

De hecho, con tus indicaciones anteriores, pude lograr incorporar los elementos del ng-repeat sin duplicados en una lista de opciones, con el siguiente código:

<option>[object.TEMAS]</option>

ADJUNTO IMAGEN.

Ahora otra consulta, ¿se podría agregar una opción o botón para copiar (al portapapeles) el texto de algún elemento presentado por el ng-repeat? sé que se puede seleccionar y usar las teclas Ctrl + C; pero se puede agregar código al código expuesto más arriba, para hacerlo sin usar teclado...?

Uploaded files:

You need to login to have access to uploads.

#10 · April 2, 2024, 2:53 am

Lo he conseguido. Ver imagen adjunta

Uploaded files:

You need to login to have access to uploads.

luishp has reacted to this post.

Angular directives: ng-repeat - Forum

Angular directives: ng-repeat