使用ng-repeat(angularjs,html)在表格中显示数据表

时间:2017-02-22 20:36:20

标签: php html angularjs arrays json

我在表格中显示我想要的数据时遇到了麻烦。我做了以下草图,所以你们可以弄清楚我想要展示的内容:

Detalle Proyecto

我在我的php / mysql连接器中的查询为我带来了每个“Tarea”数据(第二个表)带有“proyecto”和“alerta”,但我需要每行只显示一次“proyecto”和“alerta”。

所以我用角度来存储第二个表(Tarea,Termino,Estado,Nombre)的数据,而我显示第一个表的数据。

scope.llamada1 = function() { 

    $http.get("conector.php?tipoDato=query1")
    .then(function(response) {
        $scope.mensajeEspera = "";
        $scope.datos1 = response.data;

      for(var i = 0; i < $scope.datos1.length; i++){
            var currentObj = $scope.datos1[i];
            $scope.datos1[i].detalleProyecto = [{
                "tarea":currentObj.tarea , 
                "fecha_termino":currentObj.fecha_termino , 
                "estado":currentObj.estado, 
                "nombre_completo":currentObj.nombre_completo}];
      }
   });
}

在html中,我得到了这样的数据,其中的表格位于最后一个:

<table id="tablaTareas" class="table table-striped table-bordered" >
    <thead>
        <tr>
        <td><b>Proyecto</b></td>
        <td><b>Alerta</b></td>
        <td><b>Tareas</b></td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in datos1 ">
            <td style="vertical-align: top;">{{x.proyecto}}</td>
            <td style="vertical-align: top;">{{x.alerta}}</td>
            <td style="vertical-align: top;">
            <table class="table table-striped table-bordered" >
                <thead>
                    <tr>
                        <td><b>Tarea</b></td>
                        <td><b>Termino</b></td>
                        <td><b>Estado</b></td>
                        <td><b>Responsable</b></td>
                    </tr>
                </thead>

                <tbody>
                    <tr ng-repeat="y in x.detalleProyecto track by $index">
                        <td>{{y.tarea}}</td>
                        <td>{{y.fecha_termino}}</td>
                        <td>{{y.estado}}</td>
                        <td>{{y.nombre_completo}}</td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>

但正在重复“Proyectos”和“Alerta”并且每行显示1个“Tarea”而不是每个任务和每个任务一起显示,下面是一个例子。

data

1 个答案:

答案 0 :(得分:1)

您应该尝试以这种方式安排数据

[
 {
  name: nombre_completo,
  data: [
         {
          tarea,
          fecha_termino,
          estado
         }
        ]
 }
]

其中name是您不想重复的重复数据

一个小例子

如果你有像

这样的数据
[{country: Chile, name: Martin},{country: Chile, name: Nico},{country: Peru, name: Seba},{country: Peru, name: Nicole},{country: Argentina, name: Warencita}]

试试这个(假设var datos是存储数据的地方)

var datos = [{country: 'Chile', name: 'Martin'},{country: 'Chile', name: 'Nico'},{country: 'Peru', name: 'Seba'},{country: 'Peru', name: 'Nicole'},{country: 'Argentina', name: 'Warencita'}]

var temp = []
var exists
var place

for(var i = 0; i < datos.length; i++){
    exists = false;
    for(var k = 0; k < temp.length; k++){
        if(datos[i].country === temp[k].country){
            exists = true;
            place = k;
            break;
        }
    }

    if(exists){
        temp[place].data.push({
            name: datos[i].name
        })
    }else{
        temp.push({
            country: datos[i].country,
            data: [{
                name: datos[i].name
            }]
        })
    }
}