ng-repeat 中的 md-radio-group
md-radio-group within ng-repeat
我正在整理一份问卷。每个问题都插入一个 ng-repeat,每个问题都有多个选择项。我使用 angular material 的 md-radio-group 将这些多项选择项作为单选按钮插入。
选择问题 1 中的三个单选按钮之一反映了以下所有问题。感谢任何帮助。
更新:我创建了一个重复问题的 CodePen。发现于:
<div class="main" ng-app="MyApp">
<div ng-controller="AppCtrl as asaq">
<h1>{{ asaq.title }}</h1>
<form name="collection" novalidate>
<div class="questionnaire">
<div class="questions">
<div class="question" ng-repeat="question in asaq.questions">
<h2>Question {{ question.hrsQuestionOrderNumber }} <span>of {{ asaq.questions.length }}</span></h2>
<p>
{{ question.descriptionLong }}
</p>
<div class="options">
<md-radio-group ng-model="asaq.answers.group">
<md-radio-button ng-repeat="option in question.choiceModels" ng-value="option.description254" required>
{{ option.description254 }}
</md-radio-button>
</md-radio-group>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Javascript:
angular
.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function() {
var self = this;
self.title = 'md-radio-group within ng-repeat';
self.questions = [
{
"hrsQuestionOrderNumber": 1,
"descriptionLong": "Do you collect money from anyone?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable",
}
]
},
{
"hrsQuestionOrderNumber": 2,
"descriptionLong": "Are pre-numbered receipts given to the person paying money?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No",
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 3,
"descriptionLong": "Do cash receipts or logs contain sufficient detail to accurately describe the nature of the transaction?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 4,
"descriptionLong": "Do receipts or logs identify individuals and not groups of individuals?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 5,
"descriptionLong": "For money collected, is it always deposited and never used for purchases?",
"choiceModels": [
{
"description254": "Yes",
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 6,
"descriptionLong": "For money not yet deposited, is it kept in a secure location?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 7,
"descriptionLong": "Do you keep a file of original deposit documentation—including cash receipts or logs—together?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
}
];
})
.config(function($mdIconProvider) {
});
您正在使用同一个 scope
变量来存储所有答案。每个答案都需要单独的变量。那么看看这支笔吧。我刚刚添加了一个字段来将答案存储在 questions
对象中。
我正在整理一份问卷。每个问题都插入一个 ng-repeat,每个问题都有多个选择项。我使用 angular material 的 md-radio-group 将这些多项选择项作为单选按钮插入。 选择问题 1 中的三个单选按钮之一反映了以下所有问题。感谢任何帮助。
更新:我创建了一个重复问题的 CodePen。发现于:
<div class="main" ng-app="MyApp">
<div ng-controller="AppCtrl as asaq">
<h1>{{ asaq.title }}</h1>
<form name="collection" novalidate>
<div class="questionnaire">
<div class="questions">
<div class="question" ng-repeat="question in asaq.questions">
<h2>Question {{ question.hrsQuestionOrderNumber }} <span>of {{ asaq.questions.length }}</span></h2>
<p>
{{ question.descriptionLong }}
</p>
<div class="options">
<md-radio-group ng-model="asaq.answers.group">
<md-radio-button ng-repeat="option in question.choiceModels" ng-value="option.description254" required>
{{ option.description254 }}
</md-radio-button>
</md-radio-group>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Javascript:
angular
.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function() {
var self = this;
self.title = 'md-radio-group within ng-repeat';
self.questions = [
{
"hrsQuestionOrderNumber": 1,
"descriptionLong": "Do you collect money from anyone?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable",
}
]
},
{
"hrsQuestionOrderNumber": 2,
"descriptionLong": "Are pre-numbered receipts given to the person paying money?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No",
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 3,
"descriptionLong": "Do cash receipts or logs contain sufficient detail to accurately describe the nature of the transaction?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 4,
"descriptionLong": "Do receipts or logs identify individuals and not groups of individuals?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 5,
"descriptionLong": "For money collected, is it always deposited and never used for purchases?",
"choiceModels": [
{
"description254": "Yes",
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 6,
"descriptionLong": "For money not yet deposited, is it kept in a secure location?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 7,
"descriptionLong": "Do you keep a file of original deposit documentation—including cash receipts or logs—together?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
}
];
})
.config(function($mdIconProvider) {
});
您正在使用同一个 scope
变量来存储所有答案。每个答案都需要单独的变量。那么看看这支笔吧。我刚刚添加了一个字段来将答案存储在 questions
对象中。