2

I have a set of question that come from a JSON file.

In my view I loop through these questions and output the type of input:

<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>

In the controller I am watching the $scope.questions for any changes and then logging out the scope.

The answer is set as:

[object Object]

I need to pass the answer as an object as need the value and question text.

Example question data from Array:

[
    {
        "id":"questionId",
        "answerType":"single",
        "answerStyle":"select",
        "title":"Question Title",
        "answers":[
            {
                "value":0,"name":"3 years"
            }
    }
]
2
  • can you post the questions array Commented Mar 27, 2017 at 9:53
  • @sachilaranawaka Updated question. Commented Mar 27, 2017 at 9:57

4 Answers 4

1

if you want whole object as value then you can do this

use value instead of ng-value. Downfall of this is when you select an option in select box value of the ng-model gonna be string value. for that u need to convert the string into json using JSON.parse()

personally i don't recommend this but since you need whole object as value, this is a one way you can do. If you want one value in option then you can easily use 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>

Sign up to request clarification or add additional context in comments.

Comments

1

This is because you are Change assigning ng-value="{{option}}" i.e. option is an object itself you need to assign a property of the object to ng-value. Try this:

Change

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

to

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

1 Comment

I need the value AND the question 'label / text' to use in the controller.
0

I think your are misusing same data model question.answers use two models for handle data and answer

Comments

0

I had to use $index in :

<select ng-model="book_obj_index" ng-change="controller_function()">
    <option value="{{$index}}" ng-repeat="book in books">{{book.title}}</option>
</select>

Then in a controller I can get needed object by this index:

$scope.controller_function= function()
{
    // use
    $scope.books[$scope.book_obj_index];
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.