arrays - example - AngularJS ng-repeat para poblar la grilla de la matriz

ng-repeat filter

Question

Gracias de antemano por leer. Estoy tratando de utilizar angular ng-repeat para representar objetos de una matriz en una tabla Nx3. Por el bien del ejemplo, consideremos una tabla de 3x3.

Aquí hay un ejemplo simplificado de la matriz:

objects = [{"text": "One, One"},{"text": "One, Two"},{"text": "One, Three"},
           {"text": "Two, One"},{"text": "Two, Two"},{"text": "Two, Three"},
           {"text": "Three, One"},{"text": "Three, Two"},{"text": "Three, Three"}];

El campo "texto" describe en qué parte de la matriz de cuadrícula 3x3 debe aparecer cada elemento. Me gustaría utilizar ng-repeat en objetos para generar html que se ve así:

<table>
  <tr>
    <td>One, One</td>
    <td>One, Two</td>
    <td>One, Three</td>
  </tr>
  <tr>
    <td>Two, One</td>
    <td>Two, Two</td>
    <td>Two, Three</td>
  </tr>
  <tr>
    <td>Three, One</td>
    <td>Three, Two</td>
    <td>Three, Three</td>
  </tr>
</table>

¿Hay alguna forma de lograr esto sin necesidad de dividir la matriz en matrices separadas para cada fila?

Answer 1

La mejor manera posible sería alterar el modelo de vista en el controlador y vincularlo a ng-repeat (Pero ya dijiste que no querías hacer eso). Si alguna vez planea tomar esa ruta, también puede echar un vistazo a la respuesta del usuario @ m59 donde crea un filtro reutilizable para hacerlo. Sin embargo, esta es solo una respuesta simple haciendo uso de la expresión de evaluación configurable del filtro incorporado, donde podemos devolver el valor de falsedad / falsedad para determinar si deben repetirse o no. Esto finalmente tiene la única ventaja de no tener que crear bloques de 2 ng de repetición (aunque eso no es tan malo). Entonces, en su controlador agregue una función en el alcance,

$scope.getFiltered= function(obj, idx){
   //Set a property on the item being repeated with its actual index
   //return true only for every 1st item in 3 items
    return !((obj._index = idx) % 3); 
}

y en su vista aplique el filtro:

  <tr ng-repeat="obj in objects | filter:getFiltered">
    <!-- Current item, i.e first of every third item -->
    <td>{{obj.text}}</td> 
    <!-- based on the _index property display the next 2 items (which have been already filtered out) -->
    <td>{{objects[obj._index+1].text}}</td>
    <td>{{objects[obj._index+2].text}}</td>
  </tr>

Plnkr

Answer 2

Yo quería hacer exactamente lo mismo.

Convierta una matriz en una matriz / grilla

Tengo una matriz que quería convertir en una cuadrícula / matriz de tamaño de columna 4. La siguiente implementación funcionó para mí. Puede usar los dos contadores: row y col como desee en el lado de la repetición ng anidada

En mi caso, el número de columnas es 3. Pero puedes reemplazar ese 3 con una variable en todas partes. h.seats es mi matriz de objetos y quiero imprimir X o - en función del valor del elemento en esa matriz

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
                <td>{{row+1}}</td>
                <td class="text-primary"
                    ng-repeat="(col, t) in h.seats track by $index"
                    ng-if="col >= (row)*3 && col < (row+1)*3">
                        <span ng-show="t.status"> X </span> 
                        <span ng-show="!t.status"> - </span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th> imprime la fila del encabezado con el número de columna en la parte superior. getNumber(h.seats.length, 3) me devuelve el número de filas de esa tabla de la siguiente manera

.controller(''CustomViewController'', function ($scope, Principal, $state) {

    $scope.getNumber = function(length, columns) {
        return new Array(parseInt(length / columns + 1, 10));   
    }

La línea ng-if="col >= (row)*3 && col < (row+1)*3" es una lógica importante para calcular qué elementos se deben poner en esa fila. El resultado se ve a continuación

0  1  2  3 
1  e1 e2 e3 
2  e4 e5 e6 
3  e7 e8 

Consulte el siguiente enlace para obtener detalles sobre cómo se usan los contadores de filas y contadores: https://.com/a/35566132/5076414