-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Radio group with Custom Item Template
-
Drop-Down Menu
-
Dropdown: Load Data from Web Services
-
Dropdown with Custom Item Template
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature Pad
-
Multiple Text
-
Rating
-
Ranking
-
Comment
-
Image
-
Html
-
File
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Share data between questions
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
Go next page automatically
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
VisibleIf
-
Simplify Cascade Conditions
-
Complex questions in expressions
-
Use custom function in expressions
-
Create custom condition/expression properties
-
Conditions in dynamic questions
-
Show/Hide choices in radiogroup/checkbox/dropdown
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Show/Hide columns/rows in matrix question
-
Show/Hide rows in matrix dropdown question
-
EnableIf
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Service
Conditional visibility
Survey.StylesManager.applyTheme("defaultV2");
var json = {
"showQuestionNumbers": "off",
"elements": [
{
"type": "radiogroup",
"name": "haveKids",
"title": "Do you have a kid(s)?",
"isRequired": true,
"choices": [ "Yes", "No" ],
"colCount": 0
},
{
"type": "dropdown",
"name": "kids",
"title": "How many kids do you have",
"visibleIf": "{haveKids}='Yes'",
"isRequired": true,
"choices": [ 1, 2, 3, 4, 5 ]
},
{
"type": "dropdown",
"name": "kid1Age",
"title": "The first kid age:",
"visibleIf": "{haveKids}='Yes' and {kids} >= 1",
"isRequired": true,
"choicesMax": 18
},
{
"type": "dropdown",
"name": "kid2Age",
"title": "The second kid age:",
"visibleIf": "{haveKids}='Yes' and {kids} >= 2",
"isRequired": true,
"startWithNewLine": false,
"choicesMax": 18
},
{
"type": "dropdown",
"name": "kid3Age",
"title": "The third kid age:",
"visibleIf": "{haveKids}='Yes' and {kids} >= 3",
"isRequired": true,
"choicesMax": 18
},
{
"type": "dropdown",
"name": "kid4Age",
"title": "The fourth kid age:",
"visibleIf": "{haveKids}='Yes' and {kids} >= 4",
"isRequired": true,
"startWithNewLine": false,
"choicesMax": 18
},
{
"type": "dropdown",
"name": "kid5Age",
"title": "The fifth kid age:",
"visibleIf": "{haveKids}='Yes' and {kids} >= 5",
"isRequired": true,
"choicesMax": 18
}
]
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
function onAngularComponentInit() {
Survey.SurveyNG.render("surveyElement", {
model: survey
});
}
var HelloApp =
ng.core
.Component({
selector: 'ng-app',
template: '<div id="surveyContainer" class="survey-container contentcontainer codecontainer"><div id="surveyElement"></div></div> '})
.Class({
constructor: function() {
},
ngOnInit: function() {
onAngularComponentInit();
}
});
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(HelloApp);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Conditional visibility, Angular Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://npmcdn.com/zone.js/dist/zone-evergreen"></script>
<script src="https://npmcdn.com/core-js@2.6.5/client/shim.min.js"></script>
<script src="https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js"></script>
<script src="https://npmcdn.com/@angular/core@2.0.0-rc.5/bundles/core.umd.js"></script>
<script src="https://npmcdn.com/@angular/common@2.0.0-rc.5/bundles/common.umd.js"></script>
<script src="https://npmcdn.com/@angular/compiler@2.0.0-rc.5/bundles/compiler.umd.js"></script>
<script src="https://npmcdn.com/@angular/platform-browser@2.0.0-rc.5/bundles/platform-browser.umd.js"></script>
<script src="https://npmcdn.com/@angular/platform-browser-dynamic@2.0.0-rc.5/bundles/platform-browser-dynamic.umd.js"></script>
<script src="/DevBuilds/survey-angular/survey.angular.min.js"></script>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
</head>
<body style="margin: 0">
<ng-app></ng-app>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.
Settings
clearInvisibleValues
Clear values for invsible questions on survey complete, default value is "onComplete".
- none - do no clear values for invisible questions.
- onComplete - clear values for invisible questions survey completing. Before sending data to the server.
- onHidden - immediately clear value after a question becomes invisible.
survey.clearInvisibleValues = yourValue;
-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Radio group with Custom Item Template
-
Drop-Down Menu
-
Dropdown: Load Data from Web Services
-
Dropdown with Custom Item Template
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature Pad
-
Multiple Text
-
Rating
-
Ranking
-
Comment
-
Image
-
Html
-
File
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Share data between questions
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
Go next page automatically
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
VisibleIf
-
Simplify Cascade Conditions
-
Complex questions in expressions
-
Use custom function in expressions
-
Create custom condition/expression properties
-
Conditions in dynamic questions
-
Show/Hide choices in radiogroup/checkbox/dropdown
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Show/Hide columns/rows in matrix question
-
Show/Hide rows in matrix dropdown question
-
EnableIf
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Service