¿Cómo imprimir distintas columnas con ng-repeat?

Estoy creando una tabla a partir de los datos que me retorna un servicio, esto en la ruta vreporte/1 (El 1 varia dependiendo del reporte).

Desde el servicio 1 ( vreporte/1 ) llegan datos así:

{teatro: "Unico", graph: 24696, box: 150100}

Pero desde el servicio 2 (vreporte/2) llegan así.

{teatro: "Unico", graph: 24696, *valtarj*: 150100}

Y desde el servicio 3 (vreporte/3) así

{teatro: "Unico", graph: 24696, oxs: 150100, pkl: 432 }

El problema está en que la tabla solo me está imprimiendo los datos para el primer tipo de reporte debido a que en el ng-repeat tengo especificados los nombres de las llaves.

    <div class="row header">
      <div class="col" ng-repeat="titulo in titulosTabla">{{titulo | capitalize}}</div>
    </div>
    <div class="row" ng-repeat="dato in tabla | filter:q | orderBy:'box':true">
      <div class="col">{{dato.teatro}}</div>
      <div class="col">{{dato.graph | number:0}}</div>
      <div class="col">{{dato.box | number:0}}</div>
    </div> 

Tabla del reporte uno

tabla reporte uno

Tabla del reporte dos

introducir la descripción de la imagen aquí

La idea es que en la misma ruta pueda hacer las tablas de todos los reportes.

Hay forma de hacer mas flexible la tabla o el ng-repeat de tal manera que acepte otros nombres de las columnas y/o nuevas columnas??

2
задан 28.12.2016, 05:06
0 ответов

Я нашел решение конвертируя данные, которых он приносит из услуги в массиве, и пробегая с двумя ng укрытых-repeat, таким образом, не имеют значение ни число колонн ни имен, и для заголовка таблицы просто используйте Object.keys в JSON, который отвечает услугу. Это осталось так:

Таблица

<div class="row" id="cuerpotabla" ng-repeat="filas in tabla">
   <div class="col" ng-repeat="dato in filas">{{dato | formato}}</div>              
</div>

Драйвер vreporte /*

angular.forEach(datos,function(valor,llave){
   //datos de la grafica
   $scope.labels.push(valor.teatro);
   $scope.data.push(valor.graph);

   //datos de la tabla
   $scope.titulosTabla = Object.keys(valor);                    
   $scope.tabla.push(Object.values(valor));

}); 
1
ответ дан 03.12.2019, 17:57

Одна из лучших характеристик AngularJS состоит в том, что он обладает несколькими директивными органами, чтобы манипулировать условно DOM как ng-if, ng-switch и ng-show. Ты можешь использовать любую из этих для того, чтобы твои данные показали себе, если они существуют, так что он не имеет значения каков, будьте структурой этих данных они появятся правильно.

Только ты нуждаешься в чем-то как это

<div class="row header">
  <div class="col" ng-repeat="titulo in titulosTabla">{{titulo | capitalize}}</div>
</div>
<div class="row" ng-repeat="dato in tabla | filter:q | orderBy:'box':true">
  <div class="col">{{dato.teatro}}</div>
  <div class="col">{{dato.graph | number:0}}</div>

  <div class="col" ng-if="dato.box">{{dato.box | number:0}}</div>
  <div class="col" ng-if="dato.valtarj">{{dato.valtarj | number:0}}</div>
  <div class="col" ng-if="dato.osx">{{dato.osx | number:0}}</div>
  <div class="col" ng-if="dato.pkl">{{dato.pkl| number:0}}</div>

</div>

Имей в виду, что, таким образом, приходит ли какой-либо из данных в 0 также он не появится, так как 0 он интерпретирован как false, а следовательно ты можешь использовать условие как siguente ng-if="dato.box || dato.box === 0" чтобы оплачивать вышеупомянутую проблему.

2
ответ дан 03.12.2019, 17:57

Существуют две дорожки, с моей перспективы:

1-Получать с услуг vreporte/* идентификатор, который позволял бы тебе знать, что таблица идет обрабатывать и так мочь иметь в ng-repeat я заношу в список с именами, которые соответствуют согласно услуге.

2-Использовать следующую идею:

 <div class="col">{{dato.[0]}}</div>
  <div class="col">{{dato.[1] | number:0}}</div>
  <div class="col">{{dato.[2] | number:0}}</div>

Таким образом, не верь в зависимость от имен и как следствие директивный орган ng-repeat она будет готова, чтобы обрабатывать информацию.

0
ответ дан 03.12.2019, 17:57