Loop with Angularjs data

Asked

Viewed 215 times

1

I would like to make a frame with Angularjs data

inserir a descrição da imagem aqui

Populating of the data via json so:

inserir a descrição da imagem aqui

Example: date = ""01/01/2015" but, will be shown only the day

The table is made with a 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>

The json data

[
  {
    "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"
  }
]

the variable $i should be {{ dia }}

html angularjs json

  • Doing it in Angular is not so easy. Better before turning your data into an array, and so use two ngRepeat, one for the columns and one for the rows. What you tried?

  • But, I would like to manipulate the data with ng-click for example. Will I have to create a single data type: {{ calendario.id01.data01 }}, {{ calendario.id02.data02 }}, etc

  • Apparently you’re looking to set up a calendar, correct?

  • Yes, it’s a calendar

  • Well, with Angularjs, at least I don’t know, a dynamic method of filling in calendar format. But there are some calendars for Angularjs out there, take a look at this one: http://angular-ui.github.io/ui-calendar/

1 answer

0

Would that be?

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>

  • All right? I don’t want to just show the data. I would like to manipulate the data with ng-click for example

  • @Luissouza made an adjustment. I used a filter to return only the day

Browser other questions tagged html angularjs json

You are not signed in. Login or sign up in order to post.