Jason Jason - 6 months ago 52
AngularJS Question

Angular select using ng-options and ng-selected

I am having an issue with a select. I have a profile view that utilizes the profileCtrl. In that controller I get the users info from the db and put it into scope. I also use a service to grab all the info from the config table in the db and insert that into rootScope. My question and answers come from the config table (rootScope) the user's selected answer comes from the user info (scope). I need a select that preselects whatever answer the user has in the db. Below is my code.

Profile Controller:

app.controller('profileCtrl', function ($scope, $log, $http, $timeout, Data, Auth, dataShare, $sessionStorage, $rootScope, $confirm) {
$timeout(function() {

// get user's info from db and put it into scope
Data.get('profile/'+$rootScope.user.uid).then(function(data){
$scope.profs = data.data;
$scope.buttonText = 'Update Profile';
});

}, 100);

// get the configs from the configs service and put it in the rootScope
dataShare.getconfigs().then(function(data){
$rootScope.configs = data;

// get the answers from the config table for the select's options
$scope.availableAnswers = [
{ answer: $rootScope.configs[0].a1 },
{ answer: $rootScope.configs[0].a2 },
{ answer: $rootScope.configs[0].a3 },
{ answer: $rootScope.configs[0].a4 },
{ answer: $rootScope.configs[0].a5 }
];
});

// function executed on change from the select
$scope.selectedItemChanged = function() {
$log.log($scope.selectedAnswer);
}

// inline edit title
$scope.updateUser = function(data) {
Data.put('config/'+data.id, {profile_page_title:data.profile_page_title}).then(function (result) {
Data.toast(result);
});
};

$scope.saveProfile = function (profile) {

profile.roles = $rootScope.user.roles;

if(profile.uid.length > 0){
Data.put('profile/'+profile.uid, profile).then(function (result) {
$sessionStorage.user = profile;
$rootScope.user = $sessionStorage.user;
Data.toast(result);
});
}else{
Data.post('profile', profile).then(function (result) {
$rootScope.name = profile.name
Data.toast(result);
});
}

};
});


HTML: (I have condensed the code to be read easily)

<section class="row" id="" ng-repeat="profile in profs">
<div class="col-xs-12" id="questionWidget">

<h4>{{configs[0].question}}</h4>

<!-- user's answer from db -->
{{profs[0].answer}}

<select ng-model="selectedAnswer" ng-change="selectedItemChanged()" ng-options="a.answer for a in availableAnswers">

</select>

</div>
</section>

Answer

Alright, so I made a plunk, and this is what I came up with. This will set the select option if the professor's current answer exists in the list.

The reason ng-init didn't work is because the selectedAnswer model is actually expecting to see an object with property 'answer'. In other words, selectedAnswer is the entire object, not just the answer itself.

https://plnkr.co/edit/CRraZXY2jsmiV1oJx6VN?p=preview

    $scope.profs = [
        { answer: 'answer2' }
      ]


    $scope.availableAnswers = [
          { answer: 'answer1' },
          { answer: 'answer2' },
          { answer: 'answer3' },
        ];


   angular.forEach($scope.availableAnswers, function(availableAnswer){

     if ($scope.profs[0].answer === availableAnswer.answer)
      $scope.selectedAnswer = availableAnswer
   });

-- Old Answer --

Have you tried ng-init?

ng-init="selectedAnswer = profs[0].answer"