AngularJS Refresh Select Tag with dynamic content at runtime

Question

EDIT - lots of changes

After my page loads, I have some javascript function calls that return data which will be used in my markup to populate tag options.

Currently the issue is this: When the values are changed by the javascript outside ( and even inside the AngularJS controller). The view is not being updated. I have tried wrapping scope assignments in $scope.$apply(...) however this just results in a $digest() already in progress error.

AngularJS Code:

app.service('userService', ['$http', function($http) {
    var userModel = {
        qGroupZero: '',
        qGroupOne: '',
        qGroupTwo: ''
    };

    var states = '';

    return{
        getUserModel: function() {
            return userModel;
        },
        getStates: function() {
            return states;
        },
        loadChallengeQuestions: function() {
            var userEnrollmentChallenge = getChallengeQuestions();
            console.log('loadChallengeQuestions()');

            userModel.qGroupZero = userEnrollmentChallenge.challengeQuestions.questionGroup[0];
            userModel.qGroupOne = userEnrollmentChallenge.challengeQuestions.questionGroup[1];
            userModel.qGroupTwo = userEnrollmentChallenge.challengeQuestions.questionGroup[2];
        },
        loadStates: function(callback) {
            console.log('loadStates()');
            return $http.get('content/states.json').then(function(result) {
                states = result.data;
            });
        }
    };
}]);

app.controller('EnrollmentController', ['$scope', 'userService', '$http', function($scope, userService, $http) { //Dependencies and Constructor function.

    $scope.userService = userService;
    $scope.states = [];

    userService.loadChallengeQuestions();
    var userModel = userService.getUserModel();
    $scope.qGroupZero = userModel.qGroupZero.challengeQuestion; //<-- This assignment is not updated in the view.

    userService.loadStates().then(function(result) {
        $scope.states = userService.getStates(); //<-- This assignment is not updated in the view.
    });

}]);

The content of challengeQuestion is a JSON array of 7 items.

The Markup:

<select ng-model="selectionOne"
    name="question1"
    ng-options="opt as opt.questionText for opt in qGroupZero">
</select>
<select ng-model="state"
     name="state"
     ng-options="opt as opt.abbreviation for opt in states"
     class="required">
</select>

So at this point. I have all my resources. And I just need to find a way to get AngularJS to re-evaluate the ng-options value (a $scope.value) and redraw the content? I think I'm saying that right...

Why do I feel that this should be easy? And yet three days later here I am :D

Thanks for reading and helping!!!

What does your JSON object look like? If you are getting something returned, the way you set your ng-options directive could be incorrect. — Joshua Kelly
– Joshua Kelly, Commented May 28, 2015 at 23:18

Kevin F · Accepted Answer · 2015-05-29 00:57:20Z

0

What if you use the angular $http service and promise objects instead?

app.service('userService', ['$http', function($http) {
    var userModel: {
        qGroupZero: '',
        qGroupOne: '',
        qGroupTwo: ''
    };

    var states = '';

    return{
        getUserModel: function(){
            return userModel;
        },
        getStates: function(){
            return states;
        },
        loadChallengeQuestions: function(userEnrollmentChallenge) {
            console.log('loadChallengeQuestions()');
            userModel.qGroupZero = userEnrollmentChallenge.challengeQuestions.questionGroup[0];
            userModel.qGroupOne = userEnrollmentChallenge.challengeQuestions.questionGroup[1];
            userModel.qGroupTwo = userEnrollmentChallenge.challengeQuestions.questionGroup[2];
        },
        loadStates: function(){
            return $http.get('content/states.json').then(function(result){
                states = result.data;
            });
        }
    }
});

app.controller('EnrollmentController', ['$scope', 'userService', function($scope, userService) { //Dependencies and Constructor function.
    $scope.states = [];

    userService.loadStates().then(function(result){
        var userModel = userService.getUserModel();
        $scope.states = userService.getStates();
        $scope.qGroupZero = userModel.qGroupZero.challengeQuestion;
    });
}]);

edited May 29, 2015 at 0:57

answered May 28, 2015 at 22:49

Kevin F

2,8852 gold badges18 silver badges22 bronze badges

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

3 Comments

csegota Over a year ago

Working on your solution Kevin, thanks for the quick reply. Currently $scope.states is not being assigned a value. When I debugger on $scope.states = userService.getStates(), getStates() returns the array if evaluated in the console. However when I view the scope, $scope.states = ''. Also tried $scope.$apply(function() { $scope.states = userService.getStates(); }); - This causes an error..

Kevin F Over a year ago

Sorry about the mistake. Updated the code. States wouldn't have been set when it was calling getStates before, that needs to be called in the then function as well

csegota Over a year ago

I've implemented your solution exactly as you have it. But the binding of the data to $scope.states must not be calling $digest(). I tried wrapping the assignment in $apply but that just results in an error. My real question at this point is how to update a <section> tag content when the ng-options changes state. Since this doesnt seem to be happening

Collectives™ on Stack Overflow

AngularJS Refresh Select Tag with dynamic content at runtime

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related