オブジェクトをng-valueとして使用すると、[オブジェクトオブジェクト]に値が設定されます

Question

JSONファイルから質問があります。

私の見解Iのこれらの質問をループし、出力で

入力の種類：私はすべての変更のための$ scope.questionsを見て、その後、スコープをログアウトしていますコントローラで

<div ng-repeat="question in questions" id="{{question.id}}"> 
    <div ng-if="question.answerStyle == 'select'"> 
     <select ng-model="question.answer"> 
      <option value="" disabled selected hidden>Choose answer...</option> 
      <option ng-repeat="option in question.answers" ng-value="{{option}}">{{option.name}}</option> 
     </select> 
    </div> 
</div> 

。

答えは次のように設定されている：

[object Object] 

私は値と質問テキストを必要とするように、オブジェクトとしての答えを渡す必要があります。アレイから

例問題データ：

[ 
    { 
     "id":"questionId", 
     "answerType":"single", 
     "answerStyle":"select", 
     "title":"Question Title", 
     "answers":[ 
      { 
       "value":0,"name":"3 years" 
      } 
    } 
] 

Answer 1

あなたは変更がng-value="{{option}}"すなわちoptionを割り当てているためですが、それ自体は、あなたがこの

の変更をしようとng-valueにプロパティを割り当てる必要が対象です

<option ng-repeat="option in question.answers" ng-value="{{option}}">{{option.name}}</option> 

~

<option ng-repeat="option in question.answers" ng-value="{{option.name}}">{{option.name}}</option> 

Answer 2

は、私はあなたが同じデータモデル question.answers ハンドルデータのための使用の二つのモデルを、あなたは、あなたがこの

使用valueを行う代わりに、可能な値としてオブジェクト全体をしたい場合は

Answer 3

にお答えを悪用していると思いますng-value。これの低下は、あなたが文字列値になるようにngモデルの選択ボックスの値でオプションを選択するときです。そのためには、文字列をjsonに変換する必要があります。JSON.parse()

個人的に私はこれをお勧めしませんが、値としてオブジェクト全体が必要なので、これはできる方法の1つです。あなたはオプションで一つの値をしたいなら、あなたは簡単にng-value

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 
    
 
    $scope.questions = [ 
 
    { 
 
     "id":"questionId", 
 
     "answerType":"single", 
 
     "answerStyle":"select", 
 
     "title":"Question Title", 
 
     "answers":[ 
 
      { 
 
       "value":0,"name":"3 years" 
 
      }, 
 
      { 
 
       "value":0,"name":"2 years" 
 
      }] 
 
    } 
 
] 
 

 
$scope.changeItem = function(item){ 
 
    $scope.item = JSON.parse(item) 
 
    console.log($scope.item) 
 
} 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<div ng-repeat="question in questions" id="{{question.id}}"> 
 
    <div ng-if="question.answerStyle == 'select'"> 
 
     <select ng-model="question.answer" ng-change="changeItem(question.answer)"> 
 
      <option value="" disabled selected hidden>Choose answer...</option> 
 
      <option ng-repeat="option in question.answers" value="{{option}}">{{option.name}}</option> 
 
     </select> 
 
    </div> 
 
    {{question.answer}} 
 
</div> 
 
</div>