Loop with Angularjs data

Question

Loop with Angularjs data

Asked 9 years ago

Viewed 215 times

1

I would like to make a frame with Angularjs data

Populating of the data via json so:

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 }}

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?

– Vinícius Gobbo A. de Oliveira

2015/11/15 at 02:16
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

– Luis Souza

2015/11/15 at 03:02
Apparently you’re looking to set up a calendar, correct?

– celsomtrindade

2015/11/15 at 09:54
Yes, it’s a calendar

– Luis Souza

2015/11/15 at 11:09
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/

– celsomtrindade

2015/11/15 at 16:52

1 answer

Browser other questions tagged html angularjs json

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

by Emir Marques • **3,586** points · Answer 1 · 2015-11-15T02:46:29+00:00

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>