CODEWITHSUNDEEP
angularjsangularjs-scope
Lovelock
Lovelock

Reputation: 8075

Using object as ng-value sets value to [object Object]

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"
            }
    }
]

Upvotes: 2

Views: 6883

Answers (4)

Андрей Воробьев
Андрей Воробьев

Reputation: 69

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

Upvotes: 0

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

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>

Upvotes: 2

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

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>

Upvotes: 2

Dushyantha
Dushyantha

Reputation: 217

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

Upvotes: 0

Related Questions