[SOLUCIONADO] Problema con auto incrementación Angular JS

a1989 · #1 (**permalink**) 17/11/2014, 22:09

Saludos, qué tal? tengo un pequeño problema con un conteo incrementativo en Angular JS.

Tengo un <table ng-repeat> que se repite mostrando un tbody y dentro de éste tengo un <tr ng-repeat> que se repite alimentando la tabla con varios trs mostrando información.

Hasta aquí todo bien, el problema aparece cuando quiero imprimir un conteo, por cada td quiero poner un número incrementativo, es decir, el primer td que tenga como ID 1, el segundo el 2, etc...

No consigo esto, ya que cuando el tr se repite el conteo se detiene hasta antes de empezar la siguiente repetición del próximo tr, entonces el conteo queda del 1 hasta el 3 suponiendo que cada tr tiene 3 td en su interior, bueno, pego el código aquí y cuelgo el codigo para que lo puedan observen en [URL="http://embed.plnkr.co/5h0Rjk9RhMswYqayVRxN/preview"]plunker[/URL].

Código Javascript:

Ver originalfunction groupColors($scope){
    $scope.colors = [
        {name : "rojos", color : [
            ["IndianRed", "CD5C5C"],
            ["LightCoral", "F08080"],
            ["Salmon", "FA8072"]
        ]},
        {name : "rosados", color : [
            ["Pink", "FFC0CB"],
            ["LightPink", "FFB6C1"],
            ["HotPink", "FF69B4"]
        ]},
        {name : "narajnas", color : [
            ["Coral", "FF7F50"],
            ["Tomato", "FF6347"],
            ["OrangeRed", "FF4500"]
        ]}
    ];
}

Código HTML:

Ver original<body ng-app>
    <div class="container">
        <div class="table-responsive" ng-controller="groupColors">
            <table class="table table-condensed table-bordered" ng-repeat="colors in colors">
                <thead>
                    <tr>
                        <th colspan="3"><h3><strong>Colores {{colors.name}}</strong></h3></th>
                    </tr>
                    <tr>
                        <th>Nombre</th>
                        <th>Código hexadecimal</th>
                        <th>ID</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="color in colors.color" style="background-color:{{color[0]}}" ng-init="count = $index+1">
                        <td>{{color[0]}}</td>
                        <td>{{color[1]}}</td>
                        <td>{{count}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

Quisiera saber si puedo hacer ese conteo del 1 hasta donde llegue sin reiniciarse, spero que sea una tonteria, aunque me quede trabado por una tonteria, gracias de antemano! saludos!

Pantaláimon · #2 (**permalink**) 18/11/2014, 06:53

Hola!

Deberías empezar a tomar buenas prácticas de programación en AngularJS y definir tu módulo inicial y tu controlador así:

Código Javascript:

Ver originalangular.module('app', [])
  .controller('groupColors', function($scope){
      $scope.colors = [
          {name : "rojos", color : [
              ["IndianRed", "CD5C5C"],
              ["LightCoral", "F08080"],
              ["Salmon", "FA8072"]
          ]},
          {name : "rosados", color : [
            ["Pink", "FFC0CB"],
            ["LightPink", "FFB6C1"],
            ["HotPink", "FF69B4"]
          ]},
          {name : "narajnas", color : [
            ["Coral", "FF7F50"],
            ["Tomato", "FF6347"],
            ["OrangeRed", "FF4500"]
          ]}
      ];
  });

Ahora la directiva ngApp en el HTML debería quedar así:

Código HTML:

Ver original<body ng-app="app">

Luego, una cosa que te ayudará es saber que puedes saber el $index del ng-repeat de fuera con ayuda de $parent.$index.

Con lo cual ya solo tienes que encontrar la fórmula que permita que dados los $index de fuera y de dentro:

Código Javascript:

Ver original0, 0 -> te dé 1
0, 1 -> te de 2
0, 2 -> te dé 3
1, 0 -> te dé 4
1, 1 -> te dé 5
etc...

Te dejo aquí el código modificado

Un saludo!

a1989 · #3 (**permalink**) 18/11/2014, 08:00

Estupendo! Muchas gracias por la aclaración, parece ser que en vez de ser una tontería el tonto soy yo xD
Probaré y regreso al rato a marcar el post como solucionado gracias :3

a1989 · #4 (**permalink**) 18/11/2014, 10:19

en verdad no se como hacerlo, soy todo un novato e_e
la cantidad de tds no solo serán de a 3, serán diferentes, en un grupo de color habrán más colores que en otros, etc.. ya me enrede todo -___-

Pantaláimon · #5 (**permalink**) 18/11/2014, 17:02

Seguramente Angular proveerá alguna manera. A mi sólo se me ocurre esta chapuza:

http://plnkr.co/edit/tlkxPN?p=preview

a1989 · #6 (**permalink**) 18/11/2014, 23:56

Cita:

Iniciado por Pantaláimon

Seguramente Angular proveerá alguna manera. A mi sólo se me ocurre esta chapuza:

[url]http://plnkr.co/edit/tlkxPN?p=preview[/url]

Increíble! yo duré toda la noche de ayer y parte de la de hoy tratando de conseguir esa fórmula y nada de nada, pero mirando tu fórmula no creo que se me habría ocurrido algo similar xD

muchísimas gracias por tu ayuda, ya veré la cara de los chicos del trabajo al mostrarle como un Pantaláimon consiguió la fórmula que ellos no pudieron ayudarme a crear xD