I have a typeahead that looks like this:
<input type="text" class='tk-proxima-nova degreeIn candidateProfile' placeholder="School / Institution" ng-model="university" typeahead="university.Service_Provider_Name for university in universitySuggest($viewValue)" />
it returns JSON that looks similar to this:
[{"Service_Provider_ID":133368,"Service_Provider_Name":"Duke University","Service_Provider_Desc":null,"NAICS_Id":1809},{"Service_Provider_ID":196282,"Service_Provider_Name":"Duke University Medical Center","Service_Provider_Desc":null,"NAICS_Id":1809},{"Service_Provider_ID":222220,"Service_Provider_Name":"Duke University Psychology Internship","Service_Provider_Desc":null,"NAICS_Id":1809},{"Service_Provider_ID":223427,"Service_Provider_Name":"Duke University Medical Center Psychology Internship","Service_Provider_Desc":null,"NAICS_Id":1809}]
When I select the option from the typeahead it puts the school name in the field as it's supposed to, but is there a way to also set the id to another hidden input so I can send that with my selected data as well. The ID is what is important here, but the name is needed for viewing.
Yes, you can do something like :
<input type="text"
ng-model="selected"
typeahead-on-select="changeSelect($item)"
typeahead="university as university.Service_Provider_Name for university in universities | filter:{Service_Provider_Name:$viewValue} " />
Here is the Plunkr
I've a little indented your code for more clarity.
In addition to the comments Apercu gave above regarding the format of the typeahead="..." ,you need to have a typeahead-input-formatter like this
typeahead-input-formatter="univChosen($model)"
$scope.univChosen = function(theId) {
var theItem = jQuery.grep($scope.universities,function(p) {
return p.Service_Provider_ID == theId});
return theItem[0].Service_Provider_Name;
};
I'm assuming here that $scope.universities contains the complete list of all the items in the typeahead choices. I've used jQuery here to find the matching item but you can just do a for(...) loop if you want. The function returns the string that will actually get displayed, in this case the name.
Related
I'm trying to implement a scenario, where a student can answer fill in the blanks type question. There can be multiple number of blanks in a single question. The question is comping from API.
What I'm trying to achieve is, replacing each of the special characters with "text box", students can type their answers in that text boxes. When I'll save the answer, the entire string will be saved.
Eg:
Question: John ___ going ___ school. He is ___ good boy.
This should be rendered as:
John going school. He is good boy.
When sending it to API, I'll send this as a string, like John is going to school. He is a good boy.
How I'll achieve this in Angular with TypeScript..
Any help or idea to do this in other way, is really appreciated.
Thanks.
Here is a stackblitz
You need to split the question by ___ and then append an input after every index of the split result.
parts = [];
inputControls = [];
parts = this.question.split('___');
Then in your template
<div>
<span *ngFor="let p of parts; let i = index;">{{p}}
<span *ngIf="i < parts.length -1">
<input type="text" [(ngModel)]="inputControls[i]" /></span>
</span>
</div>
<div>
<button type="button" style="margin-top: 40px; background-color: green; color: white" (click)="submit()">Submit</button>
</div>
Inside submit method, compose your answer like
submit(){
let answer = '';
for(let i = 0; i < this.parts.length; i++){
answer += this.parts[i];
if(i < this.inputControls.length)
answer += this.inputControls[i];
}
console.log(answer);
}
first I'd like to thank you for your time trying to help. I am a designer and I suck at developing stuff, so I have no other option than to scream for help.
So this is the situation:
I was asked to add an image (country flag) that's gonna be dynamic, in an element that fetches info from a JSON file with, among others, Resorts (one of the elements being its country's long name, i.e. Australia) and Countries (by long name and shortcode, i.e. Australia, au).
I need to get the country shortcode printed in the img src, but the resort array is only containing its long name.
The code:
This is the way the JSON file presents the information:
{
"Countries":[
{"name":"Australia",
"code":"au",
"continent_code":"oc",
"slug":"australia"}],
"Continents":[
{"name":"Oceania",
"code":"oc",
"slug":"oceania"}],
"Resorts":[{
"id":"1",
"resort_name":"Resort Name",
"encoded_name":"resort-name",
...
"country":"Australia",
...}]
}
And this is my file bit:
const DesktopResort = ({resort}) => (
<Link href="/resort/[resort]" as={`/resort/${resort.encoded_name}`}>
<a target='_blank' className='resort-item'>
<div className="resort">
<div className="top">
<div className="title">{resort.resort_name}</div>
<img className="logo" src="/assets/img/resort-logo-sample.png" />
<span className="info">{`${resort.ski_network} - ${resort.region}`}</span>
// Down below is the "dynamic" file call
<img className="flag-icon" src={`/assets/img/flags/${resort.country}.svg`} />
</div>
<div className="arrow"><img src="/assets/img/arrow-link.png" /></div>
</div>
</a>
</Link>
)
I know its badly done right now, for this australian resort my image src is /assets/img/flags/Australia.svg and what I would need to print is of course /assets/img/flags/au.svg
How would you do it?
Thanks again!
I'd write a little helper function to look up a country code based on the country name.
Note: you'll need to handle what should happen if the country is not found, or the code is not there. I'm just defaulting to an empty string here.
const countryCode = name => {
const country = yourData.Countries.find(country => country.name === name);
return country && country.code || '';
};
Then use this when you're passing the src to your img.
<img
className="flag-icon"
src={`/assets/img/flags/${countryCode(resort.country)}.svg`}
/>
What this code does: If no flavours are selected, "Please select at least one flavour" & "You ordered and undefined is displayed". Then if a flavour is selected, nothing is displayed.
What I'm trying to do: If no flavours are selected, "Please select at least one flavour" is displayed. Then only if something is selected, I want to display "You ordered (then list whatever they ordered)" ie: You ordered Mint choc chip, cookies and cream".
I'm confused because I thought that ${flavours.slice(0, -1).join(', ')}; & You ordered {join(flavours)} would list the flavours selected. This is the code that I'm playing around with. (credit: Svelte example from Svelte website)
<script>
let scoops = 1;
let flavours = ['Mint choc chip'];
let menu = [
'Cookies and cream',
'Mint choc chip',
'Raspberry ripple'
];
function join(flavours) {
if (flavours.length === 1) return flavours[0];
return `${flavours.slice(0, -1).join(', ')};
}
</script>
<h2>Flavours</h2>
{#each menu as flavour}
<label>
<input type=checkbox bind:group={flavours} value={flavour}>
{flavour}
</label>
{/each}
{#if flavours.length === 0}
<p>Please select at least one flavour</p>
<p>
You ordered {join(flavours)}
</p>
{/if}
You've got a few mistakes...
You're missing a quote (but that's a syntax error, I guess you would have noticed if you have this in your original code because it wouldn't work at all):
return `${flavours.slice(0, -1).join(', ')};
// fixed:
return `${flavours.slice(0, -1).join(', ')}`;
// you don't need the quotes here, anyway:
return flavours.slice(0, -1).join(', ');
You're also missing a else, that's why your code display nothing when some values are selected:
{#if flavours.length === 0}
<p>Please select at least one flavour</p>
{:else} <-- HERE -->
<p>
You ordered {join(flavours)}
</p>
{/if}
And, finally, why the slice? It drops the last value, is that really what you want?
// fixed
return flavours.join(', ');
I am passing an array of category names to my template and iterating through this to populate the value of checkbox elements.
<input id={{"category"|add:escaped_cat_name}} type="checkbox" name="category" value={{category_name}}>
Some of my category names contain spaces and ampersands but Django ignores these so "Fun & Gaming" becomes "Fun":
category_name: Fun & Gaming
<input id="categoryFun" type="checkbox name="category" value="Fun">
category_name: Business Expenses
<input id="categoryBusiness" type="checkbox name="category" value="Business">
In these examples, I would like the interpreted value to read the 'Fun & Gamingand 'Business Expenses
If I add a safe tag to the value it renders the value name as "Fun" & gaming, with the second part of the string still outside the value name.
I have tried writing a custom tag to deal with this behaviour but it seems as though this is Django's default and I can't figure out how to disable it.
Any help with this would be much appreciated.
This is my answer, and I know this answer will not be nice for you: you should to learn a bit more about django, and about django forms:
Handling and processing inputs by hand is an anti-pattern. The right way is to create a Form object and render the form in template.
You can learn about forms at Working with forms djag's documentation.
Let me copy here a sample for checkboxes:
from django import forms
BIRTH_YEAR_CHOICES = ('1980', '1981', '1982')
FAVORITE_COLORS_CHOICES = (
('blue', 'Blue'),
('green', 'Green'),
('black', 'Black'),
)
class SimpleForm(forms.Form):
birth_year = forms.DateField(
widget=forms.SelectDateWidget(years=BIRTH_YEAR_CHOICES))
favorite_colors = forms.MultipleChoiceField(
required=False,
widget=forms.CheckboxSelectMultiple,
choices=FAVORITE_COLORS_CHOICES,
)
So then, we do not have to re-invent the wheel and just use Forms.
For your data:
>>> FAVORITE_COLORS_CHOICES = (
... ('categoryFun', 'Fun & Gaming'),
... ('categoryBusiness', 'Business Expenses'),
... )
>>>
>>> class SimpleForm(forms.Form):
... favorite_colors = forms.MultipleChoiceField(
... required=False,
... widget=forms.CheckboxSelectMultiple,
... choices=FAVORITE_COLORS_CHOICES,
... )
...
>>> str( SimpleForm() )
'<tr><th><label>Favorite colors:</label></th>
<td>
<ul id="id_favorite_colors">
<li>
<label for="id_favorite_colors_0">
<input type="checkbox" name="favorite_colors"
value="categoryFun" id="id_favorite_colors_0" />
Fun & Gaming
</label>
</li>...'
I am new to thymeleaf and am converting all my jsp code to thymeleaf.I don't know how to convert this below code to thymeleaf.Do anyone know how to convert the below code to thymeleaf?
<logic:iterate id="id" property="idList" name="sampleForm" indexId="i">
<label for="id<%=i%>">
<bean:write name="id" property="id" />
</label>
</logic:iterate>
Please tell me how to initialize the index value in thymeleaf to be used in some values??
<label th:each="id,status : ${idList}" th:for="|id${status.index}|" th:text="${id.id}"></label>
th:each will iterate over the idList, assign each item to id and create a label for each item. The status of the item can be assigned by adding an extra name, separated by a comma (status in this example).
th:for will set the for attribute of the label. The pipes (|) are used for easy string concatenation.
th:text will set the inner text of the label to the ID.
You can also use it like this:
<label th:each="id : ${idList}" th:for="${'id' + idStat.index}" th:text="{id.id}">
This starts the index from 0
If you want to start the index from 1 use this
<label th:each="id : ${idList}" th:for="${'id' + idStat.count}" th:text="{id.id}">
Check out the Thymeleaf documentation