javascript - 如何使用 AngularJS 填充复选框值列表?
问题描述
我正在尝试在带有服务器端的 Angular js 中构建一个测验应用程序,因为我有两种选择:
- 一题多选
(input-checkbox)
。"dataType": 3,
- 一个问题的单一选项。
(input-radio)
"dataType": 2,
我正在尝试为多个checkbox
问题填充存储的答案,在这种情况下storedAnswer
是一个数组,而storedAnswer
对于input radio
注意: storedAnswer
数组包含option.questionChoiceValue
's
我的问题是如何填充数组值以检查多项选择(checkbox
)问题:
这是我的 HTML 代码:
<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>
我有一个这样的对象:
[
{
"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"
}
]
解决方案
我相信您应该在收音机中使用 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(question, option);" />
推荐阅读
- python - 如何间隔 2 分钟运行 100 个 python 文件?
- python - Python 局部变量范围
- c - 为什么将指向字符串值的指针更改为另一个字符串有效,但不能直接更改字符串的值?
- php - 在 Mac Catalina 上安装 V8JS
- swift - Swift 构建中的类型检查规则?
- git - 在不克隆存储库的情况下获取 .git 目录
- server - 使用 ESP 01 AT 命令向服务器发送数据的正确方法
- unit-testing - 我应该如何处理使用 runtime.GOOS 的 Go 函数的测试?
- python - Flask 登录“current_user”会话已过期
- react-native - DatePicker 在 iOS react-native 0.60.6 中的工作非常奇怪