javascript - 使用 ng-options 和 ng-selected 进行 Angular 选择

Question

我在选择时遇到问题。我有一个使用 profileCtrl 的配置文件 View 。在该 Controller 中，我从数据库获取用户信息并将其放入范围内。我还使用一项服务从数据库中的配置表中获取所有信息并将其插入到 rootScope 中。我的问题和答案来自配置表(rootScope)，用户选择的答案来自用户信息(范围)。我需要一个选择来预先选择用户在数据库中的任何答案。下面是我的代码。

配置文件 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:(我已经压缩了代码以便于阅读)

<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

好吧，所以我做了一个笨拙的事情，这就是我想出的结果。如果列表中存在教授的当前答案，这将设置选择选项。

ng-init 不起作用的原因是 selectedAnswer 模型实际上期望看到具有属性“answer”的对象。换句话说，selectedAnswer 是整个对象，而不仅仅是答案本身。

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
   });

-- 旧答案 --

Have you tried ng-init?

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