1

Eu gostaria de fazer um quadro com dados AngularJS

inserir a descrição da imagem aqui

Populando dos dados via json assim:

inserir a descrição da imagem aqui

Exemplo: data = ""01/01/2015" mas, o vai ser mostrado apenas o dia

A tabela é feita com um loop

    <div ng-app="myApp" ng-controller="myCtrl">

<table class="table table-striped" border="1">

<?php
echo "<tr>";
$diadasemana = date("w", mktime(0, 0, 0, $mes, 1, $ano));
$total = 35 - $diadasemana;

if (($diadasemana == 0) and $dias == 28)
    {
    $total = 28;
    }

for ($i = 1; $i <= $total; $i++)
    {
    $diadasemana = date("w", mktime(0, 0, 0, $mes, $i, $ano));
    $cont = 0;
    if ($i == 1)
        {
        while ($cont < $diadasemana)
            {
            echo "<td></td>";
            $cont++;
            }
        }

    echo "<td><center>";
?>
 <div> <?php
    echo $i; ?></div>
<?php
    echo "</center></td>";
    if ($diadasemana == 6)
        {
        echo "</tr>";
        echo "<tr>";
        }
    }

echo "</tr>";
?>

</table>
 </div>

Os dados json

[
  {
    "id":1,
    "ano_letivo":2016,
    "escola_cod":"31011975",
    "dia":"01/01/2016",
    "situacao":"feriado"
  },
  {
    "id":2,
    "ano":2015,
    "escola_cod":"31011975",
   "dia":"02/01/2016",
    "situacao":"recesso"
  },
  {
    "id":3,
    "ano":2015,
    "escola_cod":"31011975",
    "dia":"03/01/2016",
    "situacao":"recesso"
  },
  {
    "id":4,
    "ano":2015,
    "escola_cod":"31011975",
   "dia":"04/01/2016",
    "situacao":"dia letivo"
  }
]

a variável $i deveria ser {{ dia }}

5
  • Fazer isso em Angular não é tão fácil. Melhor antes transformar seus dados em uma matriz, e assim utilizar dois ngRepeat, um para as colunas e outro para as linhas. O que você tentou? 15/11/2015 às 2:16
  • Mas, eu gostaria de manipular os dados com ng-click por exemplo. Será que terei de criar um dado único tipo: {{ calendario.id01.data01 }}, {{ calendario.id02.data02 }}, etc
    – Luis Souza
    15/11/2015 às 3:02
  • Pelo visto você está querendo montar um calendário, correto? 15/11/2015 às 9:54
  • Sim, é um calendário
    – Luis Souza
    15/11/2015 às 11:09
  • Bom, com o AngularJs, pelo menos eu desconheço, um método dinâmico de preencher em formato de calendário. Mas existem alguns calendários para AngularJs por ai, dê uma olhada nesse: angular-ui.github.io/ui-calendar 15/11/2015 às 16:52

1 Resposta 1

0

Seria isso?

var app = angular.module("App", []);
app.controller("AppController", function($scope){
    $scope.xxx = [
        {
            "id":1,
            "ano_letivo":2016,
            "escola_cod":"31011975",
            "dia":"01/01/2016",
            "situ  acao":"feriado"
        },
        {
            "id":2,
            "ano":2015,
            "escola_cod":"31011975",
            "dia":"02/01/2016",
            "situacao":"recesso"
        },
        {
            "id":3,
            "ano":2015,
            "escola_cod":"31011975",
            "dia":"03/01/2016",
            "situacao":"recesso"
        },
        {
            "id":4,
            "ano":2015,
            "escola_cod":"31011975",
            "dia":"04/01/2016",
            "situacao":"dia letivo"
        }
    ];
});

app.filter('xxxFilter', function() {
    return function(input) {
        var output = input.indexOf('-') > -1? input.split('-')[2] : input.split('/')[0];
        return output;
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="App" ng-controller="AppController">
    <ul ng-repeat="x in xxx">
        <li><input type="date" ng-model="x.dia"/></li>
        <li>{{x.dia | xxxFilter}}</li>
    </ul>
</div>

2
  • Tudo bem? Eu não quero mostrar apenas os dados. Eu eu gostaria de manipular os dados com ng-click por exemplo
    – Luis Souza
    15/11/2015 às 3:03
  • @LuisSouza efetuei um ajuste. Usei um filter para retornar somente o dia 15/11/2015 às 13:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .