I am trying to make the same functionality with the google form, which is when user choose different question type, it will show different style for data input, such as text, paragraph text, multi-choice.
Here is the link of my code:
My problem is when I choose one of the question type, it does not work, goes back to the last state.
I don't know why.
Here is part of my code:
<tr>
<th>
<label class="question_label">Question Type</label>
</th>
<td>
<select class="question_dropdown" ng-model="question.type">
<option value= "text">Text</option>
<option value= "paragraph">Paragraph Text</option>
<option value= "radio">Multiple Choice</option>
<option value= "checkbox">Checkboxes</option>
<option value= "list">Choose from a list</option>
</select>
</td>
</tr>
</tbody>
</table>
<div class="question_typeContainer" ng-switch="question.type">
<div class="question_typeText" ng-switch-when="text">
<input class="question_textfield disabled" value="Their answer" disabled>
</div>
<div class="question_typeText" ng-switch-when="paragraph">
<input class="question_textfield disabled" value="Their answer" disabled>
</div>
</div>
It seems to work fine if you use ng-show instead of ng-switch-when. Try this out.
<div class="question_typeContainer">
<div class="question_typeText" ng-show="question.type == 'text'">
<input class="question_textfield disabled" value="Their answer" disabled>
</div>
<div class="question_typeText" ng-show="question.type == 'paragraph'">
<input class="question_textfield disabled" value="Their answer" disabled>
</div>
</div>
Related
i want to show this accordion based on category that i select from selectBox,
for now it only show all data, but i want to give some filter.
Here is my code and my database.
anyone know how to do it without change any database or using angularUI accordion?
<div class="cs_member_info">
<select class="cs_member_select">
<option value="A">Type 1</option>
<option value="B">Type 2</option>
<option value="C">Type 3</option>
</select>
</div>
<div class="cs_body" ng-repeat="cs in csList">
<div class="cs_acc_div">
<button class="cs_accordion" ng-class="{'active': isClicked, 'off' : !isClicked}" ng-click="isClicked = !isClicked">
<p class="noti_title">
{{cs.faq.title}}
</p>
</button>
<div class="panel" ng-show="isClicked">
<p class="panel_inside">
{{cs.faq.contents}}
</p>
</div>
</div>
</div>
"_id":"59111a018479e30d387be584",
"lang":1,
"type":"FAQ",
"created_at":"2017-05-09T01:23:13.324Z",
"category":{
"code":1,
"name":"Member information"
},
"faq":{
"title":"Login with SNS ID",
"contents":"Login with SNS ID"
}
Check this as a reference. default angular filter
https://plnkr.co/edit/PpWo28ZO6QNiKEo1K5K7?p=preview
Here it is a table. use accordion to repeat and then filter it
Check this documentation https://docs.angularjs.org/api/ng/filter/filter
<label>Name only
<select ng-model="search.name">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Mary">Mary</option>
</select>
</label>
<br>
<table id="searchObjResults">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friendObj in friends | filter:search:strict">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr>
</table>
I have a page with on it a selectList
<div>
<fieldset class="fieldset" style="width:500px">
<legend>#CeMagResources.SelectArticle</legend>
<div>
<select data-ng-model="vm.newBon.CurrentArtikel" data-ng-options="artikel.omschrijving for artikel in vm.artikels track by artikel.id" style="width:100%"> </select>
</div>
<div data-ng-if="!vm.isNewArticleHidden" style="width:100%">
<div ng-include src="'#Url.Action("AddArticle", "Artikel")'" ></div>
</div>
</fieldset>
</div>
This page includes this
<div>
<fieldset class="fieldset">
<legend>#CeMagResources.ArticleAdd <img style="vertical-align: central" alt="new" data-ng-click="vm.addArticle()" class="icon-new" src="#Links.Content.icons.add_png"></legend>
<table>
<tr>
<td>
<label class="ui-form ui-form-label">#CeMagResources.ArticleName:</label>
</td>
<td>
<input type="text" style="width: 150px" data-ng-model="vm.newBon.CurrentArtikel.Code" capitalize>
</td>
</tr>
<tr>
<td>
<label class="ui-form ui-form-label">#CeMagResources.ArticleDescription:</label>
</td>
<td>
<input type="text" style="width: 150px" data-ng-model="vm.newBon.CurrentArtikel.Omschrijving" />
</td>
</tr>
</table>
</fieldset>
</div>
In my .ts-file I have a functions where I add the article.
Here i send the article to the server, where it is added. So far so good.
addArticle = () => {
this.bonSrv.addArticle(this.newBon.CurrentArtikel).success(this.setNewArticle);
}
When i return from the angular-promise, i come into this function.
The article returned is the same as this.newBon.CurrentArtikel, only it has also an ID, what i need in the selectList.
setNewArticle = (artikel: IArtikel) => {
this.artikels.push(artikel);
this.newBon.CurrentArtikel = artikel;
this.hideNewArticle();
}
I already read here that ng-include creates an child-scope and many solutions on the web suggest that i must use an
object to bind it to. This i already do
Also other suggest that i must use ng-options. This i also do.
When i debug in chrome, i see that the new article is pushed to the list and set as this.newBon.CurrentArticle()
Has anyone a idea why i get an undefined-option in my selectlist?
<select data-ng-model="vm.newBon.CurrentArtikel" data-ng-options="artikel.omschrijving for artikel in vm.artikels track by artikel.id" style="width:100%" class="ng-pristine ng-valid ng-touched">
<option value="4" label="A2-Papier">A2-Papier</option>
<option value="3" label="A3-papier">A3-papier</option>
...
<option value="41" label="Zonnebril">Zonnebril</option>
<option value="undefined" label="undefined" selected="selected"></option>
</select>
I have an Active Directory. I am creating a forms page in bootstrap. As I type in a portion of the name, I want the text box to come up with suggestions. For e.g. if I type in Al, it should show Alan, Alice, Alex in a combo style box below and I can select the same using a mouse click. The names come from the Active Directory.
I googled a fair bit, but perhaps I am missing something. If bootstrap + LDAP is not the right technology stack for this, what other lightweight web based options do I have? I can't use C# or Java.
This code may be helpful for you i am using datalist tag.
<body>
<div class="container">
<div class="row">
<form class="form-horizontal" style="margin-top:10%;">
<div class="form-group has-success">
<label for="country" class="col-sm-2 control-label">Select Country</label>
<div class="col-sm-2">
<input type="text" class="form-control" list="countryname" name="country">
<datalist id="countryname">
<div>
<option value="India">
<option value="France">
<option value="Germany">
<option value="Poland">
<option value="Indonesia">
<option value="USA">
<option value="UK">
<option value="Afghanistan">
<option value="Denmark">
<option value="Finland">
<option value="Greece">
<option value="Greenland">
<option value="Greenland">
<option value="Greenland">
<option value="Greenland">
</div>
</datalist>
</div>
</div>
<div class="form-group has-success">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
The combobox works exactly as autocompletion box.
<form name="companyProfileForm" autocomplete="false" novalidate ng-submit="OnSaveCompanyProfile(companyProfileForm.$valid)" ng-controller="companyProfileDataEntryController">
<section ng-hide="!IsCompanyKnown();" class="row">
<div class="small-12 medium-6 large-6 columns">
<!--Industry-->
<section class="row">
<div class="small-12 medium-12 large-12 columns" ng-class="{ 'has-error' : (companyProfileForm.Industry.$invalid && submitted) }">
<div class="form-group">
<label for="Industry">*Industry</label>
<select name="Industry"
ng-model="CompanyProfileModel.IndustryId"
ng-options="item.Id as item.Description for item in IndustryList"
required>
<option value=null>-- select an industry --</option>
</select>
<span class="help-block" ng-show="companyProfileForm.Industry.$invalid && submitted">Please select a value.</span>
</div>
</div>
</section>
</div>
</section>
<button></button>
</form>
No matter what I do this form will evaluate to true. I want it to throw an error that Industry is required. Upon submit it goes to a function that prints to the console the parameter. It prints true every time.
You need to use the AngularJS ng-required directive, not required. Change the select element required to ng-required="true":
<select name="Industry" ng-model="CompanyProfileModel.IndustryId" ng-options="item.Id as item.Description for item in IndustryList" ng-required="true">
<option value=null>-- select an industry --</option>
</select>
Using 'required' on a form element will work in angular so long as your form element has an ng-submit="action()" and a button EXACTLY as follows inside the form:
<button type='submit' ng-click='submit()'>SomeText</button>
I am trying to display the data in the screen shot only when "Arts & Culture" option is selected from drop down box whose default value is " Choose Category". The code in my html is :
<div class="well">
<h3>All Adventures</h3>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
<tr><td>
<select name="" id="" ng-model="category" ng-options="c for c in categories">
<option value="">-- Choose Category --</option>
</select>
</td>
<td><input type="text" value="Enter Current Location" /></td>
</tr>
<tr>
<td> </td>
<td><select name="" id="" ng-model="tMode" ng-options="tM for tM in tModes">
<option value="">-- Choose Transportation Mode --</option>
</select></td>
</tr>
</table>
<br/>
</div>
<ul class="unstyled">
<li ng-repeat="art in arts">
<div class="well">
<h4>{{art.name}}</h4>
<h5><em>{{art.formatted_address}}</em></h5>
<p>{{art.formatted_phone_number}}</p>
<p>{{art.vicinity}}</p>
<p>{{art.types}}</p>
</div>
</li>
</ul>
What changes in code must i make to make this work. I have been trying many examples on the web, but no luck so far.
<li ng-repeat="art in arts" ng-show="category == 'Arts & Culture'">