1
Seçimine bağlı olarak bir anket hazırlıyorum. Her sorunun seçim yapabileceği üç seçenek vardır. Soruyu içeren her bir nesnenin 'dependsOn' adlı başka bir nesnesi vardır. Örnek 1'de "Evet" seçilirse, aşağıdaki iki soru gösterilir, aksi halde atlanırlar. Bu küçük uygulama için herhangi bir yardım, fikir ve önerilerinizi takdir ediyorum. İşte bir CodePen ben birlikte konur: my codepenJSON Nesneli Açısal Tek Sayfa Uygulaması Başka bir
<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>
Eğik kodu: Ben senin sorunun ne anlamıyorum
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) {
});
veri context.questions içinde: İşte benim CodePen olduğunu. Her soru bir bağlı olduğu ifade nesnesi vardır ve bazen boş ve diğer durumlarda bu "bağlı olduğu ifade" gösterir: { "hrsQuestionId": 0, "hrsQuestionLink": 1, "hrsAnswerId": 1 } Bu, bu demektir soru, 1. sorudaki hrsAnswer 1'i seçmenize bağlıdır. Umarım bu mantıklıdır. Buna yeni başladım. – iChido
Sağ. Yürüme döngüsünde, variableOn === öğesinin sıfır olup olmadığını kontrol edebilirsiniz, böylece bu soruyu bir sonraki olarak seçebiliriz. Eğer variableOn! == null ise, cevap dizisi içinde cevabı kontrol etmeniz yeterlidir. –