Initializing/populating select boxes on page load in AngularJS

Question

I'm writing a web application using AngularJS. I use a third-party library (that provides an Angular service) to fetch values from a database, and then use those to initialize some dropdown/select boxes on a page.

So, I have simple select boxes like this:

<div ng-controller="ChoiceCtrl">
    <select ng-model="selectedFoo" ng-options="foo in foos"></select>
    <select ng-model="selectedBar" ng-options="bar in bars"></select>
</div>

And a corresponding controller that initializes the choices for the select boxes. The service I'm using calls the given callback function after it receives values from the database. (The callback functions could be refactored into one but I'm using separate ones for clarity.)

angular.module('choice').controller('ChoiceCtrl', function($scope, ThirdPartyService) {
    $scope.selectedFoo = '';
    $scope.selectedBar = '';
    $scope.foos = '';
    $scope.bars = '';

    var fooCallback = function(result) {
        $scope.foos = result;
        $scope.$apply;
    }

    var barCallback = function(result) {
        $scope.bars = result;
        $scope.$apply;
    }

    ThirdPartyService.asyncGetData('fetchFooOptions', fooCallback);
    ThirdPartyService.asyncGetData('fetchBarOptions', barCallback);
});

The database calls are asynchronous and finish after the page has been rendered for the first time, so I manually call $scope.$apply in each callback function.

Is this the right way to initialize dropdown/select boxes in an AngularJS app when the values are fetched asynchronously when loading a page?

I've read tutorials saying that calling $scope.$apply manually is always a "code smell"... But since I'm fetching the values from a database, the operation happens "outside of Angular" which I believe makes those calls justified - and actually necessary.

I'm also wondering if the controller is the right place for these calls. In the tutorials I've read the options are always set in the controller but those sandbox examples never have an asynchronous database call happening.

Community · Accepted Answer · 2017-05-23 10:32:11Z

3

You should modify three things in your code

The service should return a promise :Refer to documentation of angular for creating promise Inside service resolve the promise when data is recieved from the server
Inside controller just assign proper values to bar and foos when promise is resolved
Remove $scope.apply since now you are modifying the values inside proper angular scope

Link:Use Promise and service together in Angular

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Apr 8, 2013 at 12:48

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MJV Over a year ago

Thank you, I'll look more into promises. (I'll upvote your answer once I have the reputation to do so...)

Collectives™ on Stack Overflow

Initializing/populating select boxes on page load in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related