1
resposta

Criando uma diretiva para table

Estou tentando fazer minha própria diretiva para criar uma html table totalmente dinâmica e reaproveitável, criando até mesmo os cabeçalhos. A questão é, no controller eu defino o nome do campo que quero acessar no JSON, no caso, config.columns.value, mas em algumas situações tenho um sub objeto no JSON, exemplo value: 'solicitante.name'. Funciona muito bem quando é um valor na raiz do JSON. (Veja em tabela.html na linha do TD) Sei que em javascript poderia usar algo como eval, mas não estou conseguindo fazer isso direto na diretiva. (coloquei algumas indicações << AQUI para chamar a atenção ao trecho do código) controller.js

angular.module('sismonitor').controller('OsController', function ($scope, jdata) {
    $scope.data = [];
    $scope.filtro = '';

    $scope.config = {
        columns: [{
            header: 'Cód',
            value: 'id',
            size: 4
        }, {
            header: 'Data Abertura',
            value: 'data.date', <<<<<< AQUI
            size: 7
        }, {
            header: 'Solicitante',
            value: 'solicitante.name',
            size: 11
        }, {
            header: 'Solicitação',
            value: 'blablabla',
            size: 32
        }, {
            header: 'Serviço',
            value: 'blablabla',
            size: 9
        }, {
            header: 'Técnico',
            value: 'blablabla',
            size: 10
        }, {
            header: 'Status',
            value: 'blablabla',
            size: 15
        }]
    };

    jdata.query({
        id: 'list',
        q: 'Os'
    }, function (data) {
        $scope.data = data.list;
        console.log(data.list);
    }, function (erro) {
        console.log(erro);
    });

});

JSON (um pedacinho) que vem da API

{"list":[{
    "id": 512,
    "data": {
        "date": "2016-10-15 00:00:00.000000",
        "timezone_type": 3,
        "timezone": "America\/Sao_Paulo"
    },
    "solicitante": {
        "id": 1,
        "nome": "Preventiva",
        "tel": "3333 3333",
        "email": null,
        "depto": 2,
        "empresa": 6,
        "ramal": "4444",
        "data_alt": {
            "date": "2016-02-05 10:37:53.000000",
            "timezone_type": 3,
            "timezone": "America\/Sao_Paulo"
        },.......

diretiva.js

.directive('tabela', function () {

    let ddo = {};

    ddo.restrict = "E";
    ddo.replace = true,

        ddo.scope = {
            list: "=",
            config: "="

        };

    ddo.templateUrl = 'js/directives/tabela.html';

    return ddo;
})

tabela.html

<table cellspacing="0" cellpadding="2" class="table table-hover dataChart">
 <thead>
  <tr class="caption">
   <th width="{{coluna.size}}%" ng-repeat="coluna in config.columns">{{coluna.header}}</th>

  </tr>
 </thead>
 <tbody>
  <tr ng-repeat="linha in list">
      <td ng-repeat="cell in config.columns">{{linha[cell.value]}} <<<< AQUI </td>
  </tr>

 </tbody>
</table>

chamando

<tabela list="data" config="config"></tabela>
1 resposta

Fala edurado, tudo bom?

Estou tentando fazer uns testes aqui com seu código e estou com um probleminha para testar essa parte: jdata.query({ })

Consegue seperar essa diretiva em um projetinho, usando o angular via cdn mesmo, no github e me mandar um link?