如何使用 AngularJS 填充复选框值列表? [英] How to populate list of checkbox values with AngularJS?

问题描述

我正在尝试使用服务器端在 angular js 中构建一个测验应用程序，因为我有两种类型的选择:

1. 一个问题的多个选项(input-checkbox)."dataType": 3,
2. 单一选项对于一个问题.(input-radio) "dataType": 2,

我正在尝试为多个 checkbox 问题填充存储的答案，在这种情况下 storedAnswer 是一个数组，而 storedAnswer 是一个整数值输入单选

注意: storedAnswer 数组包含 option.questionChoiceValue 的

我的问题是如何填充数组值以进行多项选择(checkbox)问题:

这是我的 HTML 代码:

<span name="multiSelectCheckBox" ng-if="question.dataType == 3"><div ng-repeat="option in question.choices " class=""><label for="mul_{{option.questionChoiceValue}}_ques{{option.questionId}}"><span ng-repeat="stAns in question.storedAnswer"ng-if="stAns == option.questionChoiceValue"><input id="mul_{{option.questionChoiceValue}}_ques{{option.questionId}}"类型=复选框"ng-model="question.storedAnswer"ng-change="onSelect(问题, 选项);"/>{{option.questionChoiceText}}</span>
</span><span name="multiSelectRadio" ng-if="question.dataType == 2"><div ng-repeat="option in question.choices " class=""><label for="sin_{{option.questionChoiceValue}}_ques{{option.questionId}}"><input type="radio" id="sin_{{option.questionChoiceValue}}_ques{{option.questionId}}"ng-model="question.storedAnswer"value="{{option.questionChoiceValue | number}}"name="que_ques{{option.questionId}}"ng-change="onSelect(问题, 选项);"/>{{option.questionChoiceText}}

</span>

我有一个这样的对象:

<预><代码>[{"标记": "假","questionId": "7d00a35ddb6313004f3bdde748961969","帮助文本": "",回答":真实"，存储答案":[1、5],"questionSno": 1,数据类型":3，选择":[{"questionId": "7d00a35ddb6313004f3bdde748961969",问题选择值":5，"questionChoiceText": "浮动，长双"},{"questionId": "7d00a35ddb6313004f3bdde748961969",问题选择值":4，"questionChoiceText": "浮动"},{"questionId": "7d00a35ddb6313004f3bdde748961969",问题选择值":3，"questionChoiceText": "float, double, long double"},{"questionId": "7d00a35ddb6313004f3bdde748961969",问题选择值":2，"questionChoiceText": "long double, short int"},{"questionId": "7d00a35ddb6313004f3bdde748961969",问题选择值":1，"questionChoiceText": "short int, double, long int, float"}],"questionText": "在 C 中，真实数据类型(浮点数据类型)有哪些类型?",选择":假"},{"标记": "假","questionId": "93e5c5e5db6713004f3bdde748961957","帮助文本": "",回答":假"，存储答案":1，"questionSno": 3,数据类型":2，选择":[{"questionId": "93e5c5e5db6713004f3bdde748961957",问题选择值":3，"questionChoiceText": "可能是"},{"questionId": "93e5c5e5db6713004f3bdde748961957",问题选择值":2，"questionChoiceText": "假"},{"questionId": "93e5c5e5db6713004f3bdde748961957",问题选择值":1，"questionChoiceText": "真"}],"questionText": "宏的执行速度比函数快.",选择":假"}]

解决方案

我相信你应该为你的收音机使用 ng-checked 而不是 ng-model.像这样:

<input type="radio" id="sin_{{option.questionChoiceValue}}_ques{{option.questionId}}"ng-checked="question.storedAnswer"value="{{option.questionChoiceValue | number}}"name="que_ques{{option.questionId}}"ng-change="onSelect(问题, 选项);"/>

I am trying to build a quiz application in angular js with serverside for that i have 2 type of choices:

1. Multiple options for one question (input-checkbox). "dataType": 3,
2. Single option for one question. (input-radio) "dataType": 2,

I am trying to populate stored answer for multiple checkbox questions in this case storedAnswer is an array, whereas storedAnswer is an integer value for input radio

Note: storedAnswer array contains the option.questionChoiceValue's

My question is how can i populate array value as checked for multiple choice (checkbox) question:

This is my HTML code:

<div ng-repeat="question in data.questionData">

    <span name="multiSelectCheckBox" ng-if="question.dataType == 3">
        <div ng-repeat="option in question.choices " class="">
            <label for="mul_{{option.questionChoiceValue}}_ques{{option.questionId}}">
                <span ng-repeat="stAns in question.storedAnswer"
                      ng-if="stAns == option.questionChoiceValue">
                    <input id="mul_{{option.questionChoiceValue}}_ques{{option.questionId}}" 
                        type="checkbox"
                        ng-model="question.storedAnswer"
                        ng-change="onSelect(question, option);" /> 
                      {{option.questionChoiceText}}
                </span>
            </label>
        </div>
    </span>

    <span name="multiSelectRadio" ng-if="question.dataType == 2">
        <div ng-repeat="option in question.choices  " class="">
            <label for="sin_{{option.questionChoiceValue}}_ques{{option.questionId}}">

                <input type="radio" id="sin_{{option.questionChoiceValue}}_ques{{option.questionId}}" 
                    ng-model="question.storedAnswer" 
                    value="{{option.questionChoiceValue | number}}"
                    name="que_ques{{option.questionId}}"
                    ng-change="onSelect(question, option);" />
                  {{option.questionChoiceText}}                 
            </label>
        </div>
    </span>
</div>

I have an object like this:

[
    {
        "marked": "false",
        "questionId": "7d00a35ddb6313004f3bdde748961969",
        "helpText": "",
        "answered": "true",
        "storedAnswer": [
            1,
            5
        ],
        "questionSno": 1,
        "dataType": 3,
        "choices": [
            {
                "questionId": "7d00a35ddb6313004f3bdde748961969",
                "questionChoiceValue": 5,
                "questionChoiceText": "Float, long double"
            },
            {
                "questionId": "7d00a35ddb6313004f3bdde748961969",
                "questionChoiceValue": 4,
                "questionChoiceText": "Float"
            },
            {
                "questionId": "7d00a35ddb6313004f3bdde748961969",
                "questionChoiceValue": 3,
                "questionChoiceText": "float, double, long double"
            },
            {
                "questionId": "7d00a35ddb6313004f3bdde748961969",
                "questionChoiceValue": 2,
                "questionChoiceText": "long double, short int"
            },
            {
                "questionId": "7d00a35ddb6313004f3bdde748961969",
                "questionChoiceValue": 1,
                "questionChoiceText": "short int, double, long int, float"
            }
        ],
        "questionText": "In C, what are the various types of real data type (floating point data type)?",
        "selected": "false"
    },
    {
        "marked": "false",
        "questionId": "93e5c5e5db6713004f3bdde748961957",
        "helpText": "",
        "answered": "false",
        "storedAnswer": 1,
        "questionSno": 3,
        "dataType": 2,
        "choices": [
            {
                "questionId": "93e5c5e5db6713004f3bdde748961957",
                "questionChoiceValue": 3,
                "questionChoiceText": "May be"
            },
            {
                "questionId": "93e5c5e5db6713004f3bdde748961957",
                "questionChoiceValue": 2,
                "questionChoiceText": "False"
            },
            {
                "questionId": "93e5c5e5db6713004f3bdde748961957",
                "questionChoiceValue": 1,
                "questionChoiceText": "True"
            }
        ],
        "questionText": "A macro can execute faster than a function.",
        "selected": "false"
    }
]

解决方案

I believe you should be using ng-checked instead of ng-model for your radio. Like this:

<input type="radio" id="sin_{{option.questionChoiceValue}}_ques{{option.questionId}}"
       ng-checked="question.storedAnswer"
       value="{{option.questionChoiceValue | number}}"
       name="que_ques{{option.questionId}}"
       ng-change="onSelect(question, option);" /> 

这篇关于如何使用 AngularJS 填充复选框值列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！