1

It's weird and I don't have any idea of how to solve this issue...

I have my controller with an ajax call using a service with promise, which works great.

horariosOcupadosService.getHorariosOcupados($scope.formData.cmbUnidade, $scope.formData.cmbDiaSemana).then(function(response) {
            //when I set my variable with the result, everything is fine 
            //and I can iterate with ng-repeat with no problem
            $scope.horariosOcupados = response;

            $scope.formData.qtdeHorarios = $scope.horariosOcupados.length;

        }), function(error) {
            console.log(response);

        };

But in my HTML, I have a problem... after my ng-repeat, which works fine, if I try to print $scope.horariosOcupados (

{{ horariosOcupados | json }}
), it prints: 
[{},{},{}]

It only shows something if I change the value of the ng-model field.

                <div id="horarios">
                <div ng-repeat="horarioOcupado in horariosOcupados track by $index" id="horario{{$index}}" class="form-group" style="margin: 15px; 0px;">
                    <div class="col-md-2 text-center" id="remove"><a ng-href="#" ng-click="removeHorario($index)"><i class="fa fa-trash-o fa-2x"></i></a></div>
                    <div class="col-md-3">
                        <div class="input-group">
                          <span class="input-group-addon">Horário inicial</span><input name="hrEntra{{$index}}" type="text" ng-model="horariosOcupados[$index].hrInicial">
                        </div>
                    </div>

                </div>
            </div>
            <!-- GRADE DE HORÁRIOS - FIM -->
           <pre>{{ horariosOcupados | json }}</pre>

Could anyone help me to figure it out?

Thanks!

Eduardo
  • 21
  • 2
  • it seem going out of scope, also your horariosOcupados should be response.data ?. if you put that code before ng-repeat what is showing? can you show your all code or put it in plunker. – nikudale Jan 07 '16 at 22:41
  • It shows the same array, like [{},{},{}]. I tried removing ng-model from my input field and then it printed `[{"startDate": "1900-01-01 08:30:00"}, { startDate": "1900-01-01 10:30:00" }, { "startDate": "1900-01-01 11:20:00"}]`, but as I need ng-model, it's not the solution, but maybe the cause. By the way, I'll try to put it in plunker. – Eduardo Jan 08 '16 at 11:15

2 Answers2

0

You are probably doing something outside of the angular-world. How do you fetch your data asynchronously ? Do you maybe use a ajax call besides the angular built-in $http service ? or maybe with the "normal" setTimeout function instead of using the angular $timeout version ? My guess is that you are getting it somehow asynchronously without staying inside the angular world. Therefore angular does not know anything about these changes and will not update the view accordingly in time.

What you can do for the moment is try

    $scope.horariosOcupados = response;

    $scope.formData.qtdeHorarios = $scope.horariosOcupados.length;

    $scope.$apply();

to "tell" angular that something has changed hence angular will re-render the changes immediately. Idealy though it's most of the times not necessary to do so if you stay inside the angular-world and use the angular built-in services

Patrick Kelleter
  • 2,631
  • 1
  • 13
  • 19
  • In fact it was, as you said, not necessary to add $apply(). After removing the ng-model directive from my input field, everything seemed ok, except the fact that in my input field I don't have the value, obviously. Maybe the way I'm using it is not correct. I'll try to figure it out, but your answers were really helpful! Thanks. – Eduardo Jan 08 '16 at 11:18
  • It's weird, seems like ng-model is cleaning my array up, leaving it with empty slots as I said in the main post. – Eduardo Jan 08 '16 at 11:29
0

I figured it out. the problem was the maxlength of my INPUT field. The length of "1900-01-01 08:00" > 5, so angularJS set it to undefined.

Thank you all for helping me!

Eduardo
  • 21
  • 2