0

I am trying to set some options of the angular-datepicker which is based on pickadate using results from a web-api call.

So far my code is:

<label for="datepicker">Date:</label>
<input type="text" id="datepicker" pick-a-date="date" pick-a-date-options="dpoptions" placeholder="Select date" />

My js file:

var ServiceBasePath = "http://localhost:29050/api/";
var app = angular.module('myproj', ['angular-datepicker', 'ngTouch']);
app.controller('mycontroller', function ($scope, $http) {

        $scope.dpoptions = {
        format: 'ddd, dd-mm-yyyy',
        min: new Date(),
        max: _max
        }

        $http.get(ServiceBasePath + 'settings/1').
            success(function (data) {
                _max = data.MaxDays;
                $scope.config.duration = data.Duration;
                });
        }

If I set the _max value on declaration, and leave the service results out, it works fine. I think the problem is that the service doesn't return before the datepicker loads, but it seems to work okay for another field (not with datepicker) I have:

                    <label>Duration (in minutes):</label>
                    <input type="number" id="duration" ng-model="duration" min="{{config.duration}}"  />

How can I get the datepicker settings to load from the results of my $http.get?

cdsln
  • 830
  • 1
  • 11
  • 33

1 Answers1

0

change 

    $http.get(ServiceBasePath + 'settings/1').
        success(function (data) {
            $scope.dpoptions.max = data.MaxDays; //change this to scope variable
            $scope.config.duration = data.Duration;
            });
    }
yangli-io
  • 16,760
  • 8
  • 37
  • 47
  • This did not work. If I set a breakpoint after the `$scope.spoptions.max = data.MaxDays;` it looks like it has set it, but when I check the calendar it hasn't taken effect. I think it is setting it too late(calendar has already been created by the time the http.get returns and sets the max property). Any other suggestions? Thanks – cdsln Jan 15 '15 at 20:10