angularjs - llenar - tablas en angular

ng-repeat: clave de acceso y valor para cada objeto en una matriz de objetos

Question

Tengo una matriz de objetos y estoy usando una ng-repeat para iterar sobre ellos, lo cual es fácil. La matriz se ve más o menos así:

$scope.steps = [
    {companyName: true},
    {businessType: true},
    {physicalAddress: true}
];

Y mi atributo ng-repeat ve así:

<div ng-repeat="step in steps"> ... </div>

En cada iteración, el step es igual a uno de los objetos, como se esperaba. ¿Hay alguna forma de acceder a la clave y al valor del objeto step ? Para que yo pueda hacer algo como esto:

<div ng-repeat="(stepName, isComplete) in steps"> ... </div>

Donde stepName == ''companyName'' y isComplete == true . Intenté hacer exactamente esto, pero stepName siempre acaba siendo el índice del objeto step (lo cual tiene sentido). Solo intento averiguar si hay otra forma de escribir la sintaxis ng-repeat para poder obtener la clave y el valor.

Gracias por cualquier idea / sugerencia. Muy apreciado.

PD. Mi trabajo actual es simplemente hacer esto en mi controlador:

$scope.stepNames = [];
angular.forEach($scope.steps, function(isComplete, stepName){
     $scope.stepNames.push({stepName: stepName, isComplete: isComplete});
});

Y luego iterar sobre eso, pero sería bueno hacerlo todo en la vista

Answer 1

Aquí hay otra manera, sin la necesidad de anidar los repetidores.

De los documentos de Angularjs :

Es posible obtener ngRepeat para iterar sobre las propiedades de un objeto usando la siguiente sintaxis:

<div ng-repeat="(key, value) in steps"> {{key}} : {{value}} </div>

Answer 2

Creo que el problema está en la forma en que diseñó sus datos. Para mí en términos de semántica, simplemente no tiene sentido. ¿Para qué son exactamente los pasos?

Almacena la información de una compañía?

Si ese es el caso, los pasos deben ser un objeto (ver la respuesta de KayakDave) y cada "paso" debe ser una propiedad del objeto.

Almacena la información de varias compañías?

Si ese es el caso, los pasos deberían ser una matriz de objetos.

$scope.steps=[{companyName: true, businessType: true},{companyName: false}]

En cualquier caso, puede iterar fácilmente a través de los datos con una (dos para el segundo caso) ng-repeats.

Answer 3

De hecho, sus datos no están bien diseñados. Será mejor que uses algo como:

$scope.steps = [
    {stepName: "companyName", isComplete: true},
    {stepName: "businessType", isComplete: true},
    {stepName: "physicalAddress", isComplete: true}
];

Entonces es fácil hacer lo que quieras:

<div ng-repeat="step in steps">
 Step {{step.stepName}} status : {{step.isComplet}}
</div>

Ejemplo: http://jsfiddle.net/rX7ba/

Answer 4

En caso de que esta sea una opción para usted, si pone sus datos en forma de objeto, funciona de la manera que creo que espera:

$scope.steps = {
 companyName: true,
 businessType: true,
 physicalAddress: true
};

Aquí hay un violín de esto: http://jsfiddle.net/zMjVp/

Answer 5

Un repetidor dentro de un repetidor

<div ng-repeat="step in steps">
    <div ng-repeat="(key, value) in step">
        {{key}} : {{value}}
    </div>
</div>

Answer 6

parece que en Angular 1.3.12 ya no necesitas el ng-repeat interno, el bucle externo devuelve los valores de la colección es una entrada de mapa única