使用ng-options和ng-selected进行角度选择

Question

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 1

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" 

Answer 2

I have made a very complex plunkr, I was a bit slower than @brianslattery I guess.

Here's my take: https://plnkr.co/edit/5fnB6oWrZ9WhujN7eH0T?p=preview

<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 -->
    Answer: {{profile.answer}}<br>

    <select name="selector" ng-model="profile.answer" ng-change="selectedItemChanged(profile)" ng-options="a as a.answer for a in availableAnswers track by a.answer">

    </select>

  </div>
</section>

The app will look something like this:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($rootScope, $scope, $timeout, $log, $filter) {

  $timeout(function() {
    // get user's info from db and put it into scope
    $scope.profs = [ { name: 'prof1', answer: 'a3' }, { name: 'prof2', answer: 'a2' } ];
    $scope.buttonText = 'Update Profile';
    appendAnswerObjects();
  }, 100);

  // get the configs from the configs service and put it in the rootScope
  $timeout(function(data){
    $rootScope.configs = [ { question: 'Question?', a1: 'a1', a2: 'a2', a3: 'a3', a4: 'a4', a5: 'a5' } ];

    // 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 }
    ];

    appendAnswerObjects();
  }, 200);

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

  function appendAnswerObjects() {
    if($scope.profs && $scope.profs.length && $scope.availableAnswers && $scope.availableAnswers.length) {
      $scope.profs.forEach(function(profile) {
        profile.answer = $filter('filter')($scope.availableAnswers, { answer: profile.answer })[0];
      });
    }
  }

});

There are several issues to consider. NgOptions likes to use objects rather than values. Also, your 'ng repeat' is calling for profs[0] instead of using the now repeated profiles variable.

Other issue to consider is that your 'answer' would not be 'profile dependent', but will be one for the entire scope, I'm pretty sure that is NOT what you want.

So, the plunkr I created makes individual answers for each. It also takes into account the possibility of getting either the profiles first or the available answers first, no matter which comes first, which is, I believe, Important.

Let me know if this helps. Best regards,

Rafa.