angularjs 使用对象作为ng值将值设置为[object Object]

f45qwnt8  于 2023-01-20  发布在  Angular
关注(0)|答案(4)|浏览(200)

我有一组来自JSON文件问题。
在我看来,我循环这些问题并输出输入类型:

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

在控制器中,我正在观察$scope.questions中的任何更改,然后注销范围。
答案设置为:

[object Object]

我需要将答案作为一个对象传递,因为需要值和问题文本。
Array中的问题数据示例:

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

5fjcxozz1#

这是因为您正在更改赋值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>
ru9i0ody

ru9i0ody2#

我认为您误用了相同的数据模型问题。答案使用两个模型处理数据和答案

hs1rzwqc

hs1rzwqc3#

我不得不在以下位置使用$index

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

然后在一个控制器中我可以通过这个索引得到需要的对象:

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

3zwjbxry4#

如果希望将整个对象作为值,则可以执行以下操作
使用value而不是ng-value。当你在选择框中选择一个选项时,ng-model的值将是字符串值。为此,你需要使用JSON.parse()将字符串转换为json
我个人并不推荐这样做,但是因为你需要整个对象作为值,这是你可以做的一种方式。如果你想要一个选项中的值,那么你可以很容易地使用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>

相关问题