1
私はアンケートをまとめています。各質問には3つの選択肢があります。質問を含む各オブジェクトには、 'dependsOn'という別のオブジェクトがあります。 質問1で「はい」を選択すると、次の2つの質問が表示され、そうでない場合はスキップされます。 私はこの小さなアプリのための助け、アイデア、提案を感謝します。 my codepen別の選択に応じてJSONオブジェクトを使用する角型単一ページアプリケーション
<div class="main" ng-app="MyApp">
<div ng-controller="AppCtrl as q">
<h1>{{ q.title }}</h1>
<form name="collection" novalidate>
<div class="questionnaire">
<div class="questions">
<div class="question" ng-repeat="question in q.questions" ng-show="question.hrsQuestionOrderNumber === q.currentQuestion">
<h2>Question {{ question.hrsQuestionOrderNumber }} <span>of {{ q.questions.length }}</span></h2>
<p>
{{ question.descriptionLong }}
</p>
<ng-form name="subForm{{question.questionID}}" class="options">
<md-radio-group ng-model="question.hrsAnswerId" ng-change="q.watchForm(subForm{{ q.currentQuestion }})" required>
<md-radio-button ng-repeat="option in question.choiceModels" ng-value="option.description" required>
{{ option.description }}
</md-radio-button>
</md-radio-group>
</ng-form>
</div>
</div>
<nav class="clearfix">
<md-button class="md-primary md-raised" ng-click="q.questionChange('prev')" ng-disabled="q.prev">Previous</md-button>
<md-button class="md-primary md-raised" ng-click="q.questionChange('next')" ng-disabled="q.next">Next</md-button>
</nav>
</div>
</form>
角度コード：：ここに は、私は一緒に入れCodePenある
angular
.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($timeout, $scope) {
const context = this;
context.title = 'Questionnaire with Questions Depending on Choices';
context.currentQuestion = 1;
context.next = true;
context.prev = true;
context.nextButton = true;
context.form = $scope.collection;
function disableButton() {
if (context.currentQuestion === 1) {
context.prev = true;
context.next = false;
} else {
context.prev = false;
context.next = false;
}
};
context.questionChange = function (go) {
if (go === 'prev') {
context.currentQuestion = context.currentQuestion - 1;
}
if (go === 'next') {
context.currentQuestion = context.currentQuestion + 1;
$timeout(function() {
context.next = true;
});
}
disableButton();
};
context.watchForm = function (currentForm) {
if (currentForm.$invalid === false) {
if (context.currentQuestion !== context.questions.length) {
context.next = false;
}
} else {
console.log('form NOT in scope');
}
};
context.questions = [
{
"questionID": 1,
"hrsQuestionOrderNumber": 1,
"descriptionLong": "Do you collect money from anyone (students, employees, or other sources)?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None/Not applicable",
"answerId": 3
}
],
"dependsOn": null
},
{
"questionID": 2,
"hrsQuestionOrderNumber": 2,
"descriptionLong": "Are pre-numbered receipts given to the person paying money? If individual receipts are not given, do you use an approved PBO/S&I collection document?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None/Not applicable",
"answerId": 3
}
],
"dependsOn": {
"hrsQuestionId": 0,
"hrsQuestionLink": 1,
"hrsAnswerId": 1
}
},
{
"questionID": 3,
"hrsQuestionOrderNumber": 3,
"descriptionLong": "Do cash receipts or logs contain sufficient detail to accurately describe the nature of the transaction?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None/Not applicable",
"answerId": 3
}
],
"dependsOn": {
"hrsQuestionId": 0,
"hrsQuestionLink": 1,
"hrsAnswerId": 1
}
},
{
"questionID": 4,
"hrsQuestionOrderNumber": 4,
"descriptionLong": "Do receipts or logs identify individuals and not groups of individuals (such as a class)?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None/Not applicable",
"answerId": 3
}
],
"dependsOn": null
},
{
"questionID": 5,
"hrsQuestionOrderNumber": 5,
"descriptionLong": "For money collected, is it always deposited and never used for purchases?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None/Not applicable",
"answerId": 3
}
],
"dependsOn": {
"hrsQuestionId": 0,
"hrsQuestionLink": 4,
"hrsAnswerId": 1
}
},
{
"questionID": 6,
"hrsQuestionOrderNumber": 6,
"descriptionLong": "For money not yet deposited, is it kept in a secure location?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None/Not applicable",
"answerId": 3
}
],
"dependsOn": {
"hrsQuestionId": 0,
"hrsQuestionLink": 4,
"hrsAnswerId": 1
}
},
{
"questionID": 7,
"hrsQuestionOrderNumber": 7,
"descriptionLong": "Do you keep a file of original deposit documentation—including cash receipts or logs—together?",
"choiceModels": [
{
"description": "Yes",
"answerId": 1
},
{
"description": "No",
"answerId": 1
},
{
"description": "None/Not applicable",
"answerId": 3
}
],
"dependsOn": {
"hrsQuestionId": 0,
"hrsQuestionLink": 4,
"hrsAnswerId": 1
}
}
];
})
.config(function($mdIconProvider) {
});
データはcontext.questionsにあります。各質問はDEPENDSONオブジェクトを持っており、時にはそれがnullであり、他の場合には、それは "DEPENDSON" を示す：{ "hrsQuestionId"：0、 "hrsQuestionLink"：1、 "hrsAnswerId"：1 } これは、このことを意味し質問は質問1のhrsAnswer 1を選択したユーザーに依存します。私はこれの初心者です。 – iChido
歩行サイクルでは、dependsOn === nullかどうかを確認することができます。 dependsOn！== nullの場合、答えの配列で答えをチェックするだけです。 –