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>