ng-optionsとng-selectedを使用した角度選択

Question

選択に問題があります。私はprofileCtrlを利用するプロフィールビューを持っています。そのコントローラでは、私はdbからユーザ情報を取得し、スコープに入れます。私はまた、dbのconfigテーブルからすべての情報を取得し、それをrootScopeに挿入するサービスを使用します。私の質問と回答は、ユーザーの選択された回答がユーザー情報（スコープ）から来るconfigテーブル（rootScope）から来ています。私はselectを必要とします。これは、ユーザーがdb内のどのような回答をあらかじめ選択しています。以下は私のコードです。

プロフィールコントローラー：

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

さてさて、私はplunkを作った、これは私が思い付いたものです。教授の現在の回答がリストに存在する場合、これは選択オプションを設定します。

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

- オールド回答 -

あなたはNG-INITを試したことがありますか？

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

Answer 2

私は非常に複雑なplunkrをした、私は私が推測する@brianslatteryより少し遅かったです。アプリはこのようになります 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> 

：

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

}); 

が考慮すべきいくつかの問題があります

は、ここに私のテイクです。 NgOptionsは値ではなくオブジェクトを使用するのが好きです。また、あなたの 'ng repeat'はprofs [0]の代わりにというプロファイルの変数を使用する代わりに呼び出すようになっています。

他の問題は、あなたの「回答」は「プロファイル依存」ではなく、スコープ全体のものとなることです。あなたが望むものではないと確信しています。

私が作成したplunkrはそれぞれの回答を個別に作成します。それはまた、最初に来ても、利用可能な回答を最初に取得する可能性を考慮に入れています。これは重要であると私は信じています。

これが役立つかどうか教えてください。 お礼、

Rafa。