My initial HTML Code looks like:
<select name="environmentSelect" id="environment" data-show-content="true" class="form-control">
option>Environment</option>
<option value="1"
data-content="Test <span class='text-muted'>ONLINE</span><i class='fas fa-power-off text-success'></i>"></option>
<option value="2"
data-content="Dev <span class='text-muted'>OFFLINE</span><i class='fas fa-power-off text-danger'></i>"></option>
<option value="3"
data-content="Prod <span class='text-muted'>ONLINE</span><i class='fas fa-power-off text-success'></i>"></option>
</select>
The environment names are taken from DB. So i wanted to populate them with th:attr
<select name="environmentSelect" id="environment" data-show-content="true"
class="form-control">
<option>Environment</option>
<option th:each="env : ${environments}" th:value="${env.name}"
th:attr="data-content=${env.name} + '<span class=\'text-muted\'>ONLINE</span><i class=\'fas fa-power-off text-success\'></i>'"
th:text="${env.name}"
></option>
</select>
The problem is, that when i open the developer console in chrome, i see the values and data-content, but the option stays empty.
Can you please tell me, if there is a possibility to add html tags into the th:attr and if yes, how
Thanks!
I recommend not to build such complicated strings in Thymleaf pattern. Better to introduce special getter for it in DTO class
public class Environment {
// .....
public getDataContent() {
return HtmlUtils.htmlEscape(this.name + " <span class='text-muted'>ONLINE</span><i class='fas fa-power-off text-success'></i>", "UTF-8");
}
// .....
}
And template
<select name="environmentSelect" id="environment" data-show-content="true"
class="form-control">
<option>Environment</option>
<option th:each="env : ${environments}" th:value="${env.name}"
th:attr="data-content=${env.dataContent}"
th:text="${env.name}"
></option>
(question completely changed)
I use <select> with *ngFor to display a list of names of properties as follows:
Scenario
If the user interacts with the right-side panel i.e. check or un-check the values or clicks Add property without Filters button I save the name of the property in a JSON structure:
{
selectedProperties: ['isDampProof', '..']
}
I want to add <i class="fa fa-check fa-1px"></i> in front of all the properties within the above mentioned array. Since the option and i are in a ngFor loop I cannot change the individual states currently. For example:
<select size="15" class="form-control mr-4">
<optgroup label="Properties">
<option *ngFor="let eachVal of dataResults"
[selected]="searchModel.translatedProperty===eachVal.translatedProperty"
(click)="getPropertyValues(eachVal)"
>
<i class="fa fa-check fa-1x" *ngIf="....Condition here..."></i>
{{eachVal.translatedProperty}}
</option>
</optgroup>
</select>
How do I add Tick marks in front of the the name which are included in the array?
Perhaps you need to modify this snippet to work in your component but you can get the idea: <option [disabled]="eachVal.translatedProperty === 'hasCompotion' && melanineState === false">
And I wouldn't use the :checked attribute but bind a state when the checkbox is clicked so that you will now the value/state of the checkbox.
If you want you can add some more code from the component and the model of eachVal object to add more specific snippet.
I ended up using a unicode checkmark with ngClass since only text is allowed in the <option> tag.
I created a propSelection function which checks for if the filters for a property were selected or not.
component.html
<select size="15" class="form-control mr-4">
<optgroup label="Properties">
<option *ngFor="let eachVal of dataResults"
[selected]="searchModel.translatedProperty===eachVal.translatedProperty"
(click)="getPropertyValues(eachVal)"
[ngClass]="{'checkMark': propSelection(eachVal.translatedProperty)}"
>{{eachVal.translatedProperty}}
</option>
</optgroup>
component.ts
propSelection(eachVal): boolean {
// console.log(name);
return this.sparqlJSON['parameters'].findIndex(i => i === eachVal) > -1;
}
I am trying to write a dropdown list for selecting country, is possible to add flag of country next to the country name??
<div class="chosen-input-group col-sm-10 ">
<select id="country_type" chosen data-placeholder="-- 國家 --" disable-search="false"
ng-options="country_.country_id as country_.name for country_ in vm.country_data"
ng-model="vm.item.country_id">
<option value=""> -- 國家 --</option>
</select>
</div>
You could use ng-repeat on the option tag and then style the option with the image as you want it
<select >
<option ng-repeat="country_ in vm.country_data"
value="country_.country_id"
style="background-image:url({{country_.name}}.png);">
{{ country_.name }}
</option>
</select>
It is not possible using a native select with options.
Have a look to https://github.com/angular-ui/ui-select
Soruce : Angular select with images
I added the icon directly to the ng-template tag, and it works:
<ng-select [clearable]="false" [searchable]="false" [items]="items" bindLabel="libelle" [(ngModel)]="selectedItem">
<ng-template ng-label-tmp let-item="item">
<i class="fa fa-eye"></i>
<b> {{item.libelle}}</b>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<i class="fa fa-eye"></i>
<b> {{item.libelle}}</b>
</ng-template>
</ng-select>
This question already has an answer here:
ngRepeat:dupes - duplicates in repeater with nested ngrepeat and empty strings
(1 answer)
Closed 5 years ago.
I found this error on a dropdown menu like this:
<div class='dropdown'>
<span>Seleziona Nazione: </span>
<select class='opzioni' ng-model="nazioni">
<option ng-repeat="nazione in nazioni" value='nazione'>{{nazione}}
</option>
</select>
</div>
In my controller i have this code:
$scope.nazioni = ['Austria', 'Belgio', 'Bulgaria', 'Croazia', 'Danimarca', 'Finlandia', 'Francia', 'Germania', 'Grecia', 'Inghilterra', 'Italia', 'Norvegia', 'Olanda', 'Polonia', 'Portogallo', 'Rep. Ceca', 'Romania', 'Russia', 'Spagna', 'Turchia', 'Svezia', 'Svizzera', 'Ucraina'];
When i run it and i select a Nation, i can read this error in the console:
angular.js:14525 Error: [ngRepeat:dupes]
http://errors.angularjs.org/1.6.4/ngRepeat/dupes?p0=nazione%20in%20nazioni&p1=string%3An&p2=n
I got the same error again when I use a list that come from database, like this one :
$http.get('/api/teams').then(function(response){
$scope.teams = response.data;
console.log(response.data);
});
And in the html :
<div class='SquadraCasa'>
<span>Seleziona Squadra Casa: </span>
<select class='opzioni' ng-model="teams">
<option ng-repeat="team in teams" value='team.Nome'>{{team.Nome}}
</option>
</select>
</div>
Add the track by $index
<div class='dropdown'>
<span>Seleziona Nazione: </span>
<select class='opzioni' ng-model="nazioniSelected">
<option ng-repeat="nazione in nazioni track by $index" value='{{nazione}}'>{{nazione}}
</option>
</select>
</div>
also can improve like this,
<div class='dropdown'>
<span>Seleziona Nazione: </span>
<select ng-options="item as item for item in nazioni track by $index" class='opzioni' ng-model="nazioniSelected">
<option value="">Select...</option>
</select>
</div>
This is because your array isnt identificable. Also you ng-model need to be diferent to the array you iterate.
Aside from your error, it is worth pointing out that the 'value' of all your dropdown items will be the same, as you only update the displayed text dynamically based on which item you're currently iterating over
So I'd try this:
<option ng-repeat="nazione in nazioni" value='{{nazione}}'>{{nazione}}
</option>
Remove the value attribute from the option tag:
<div class='dropdown'>
<span>Seleziona Nazione: </span>
<select class='opzioni' ng-model="nazioni">
<option ng-repeat="nazione in nazioni">{{nazione}}
</option>
</select>
</div>
or change it to bind to the data properly:
<div class='SquadraCasa'>
<span>Seleziona Squadra Casa: </span>
<select class='opzioni' ng-model="teams">
<option ng-repeat="team in teams" value='{{team.Nome}}'>{{team.Nome}}
</option>
</select>
</div>
Having a simple string in the value attribute ('nazioni') will result in all your options having the same value ('nazioni') when you really want the values to be each of the nations in the list you provided.
You have duplicate keys, use track by $index a.e.:
<select class='opzioni' ng-model="selectedNazioni">
<option ng-repeat="nazione in nazioni track by $index" >{{nazione}}
</option>
</select>
Controller:
$scope.nazioni = ['Austria', 'Belgio', 'Bulgaria', 'Croazia', 'Danimarca', 'Finlandia', 'Francia', 'Germania', 'Grecia', 'Inghilterra', 'Italia', 'Norvegia', 'Olanda', 'Polonia', 'Portogallo', 'Rep. Ceca', 'Romania', 'Russia', 'Spagna', 'Turchia', 'Svezia', 'Svizzera', 'Ucraina'];
// set default value
$scope.selectedNazioni = 'Austria';
DEMO
I am using Flat-UI (http://designmodo.github.io/Flat-UI/) to aid with the front-end elements of a small MeteorJS App I am building.
The problem I am having is that the Select Dropdown is not working. And I would like to know how to get the option value.
Please see the below Markup:
<div class="select2-container form-control select select-primary" id="s2id_autogen1">
<a href="javascript:void(0)" class="select2-choice" tabindex="-1">
<span class="select2-chosen" id="select2-chosen-2">My Profile</span>
<abbr class="select2-search-choice-close"></abbr>
<span class="select2-arrow" role="presentation">
<b role="presentation"></b>
</span>
</a>
<label for="s2id_autogen2" class="select2-offscreen"></label>
<input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-2" id="s2id_autogen2">
</div>
<select class="form-control select select-primary" data-toggle="select" tabindex="-1" title="" style="display: none;">
<optgroup label="Profile">
<option value="0">My Profile</option>
<option value="1">My Friends</option>
</optgroup>
<optgroup label="System">
<option value="2">Messages</option>
<option value="3">My Settings</option>
<option value="4">Logout</option>
</optgroup>
</select>
This is what we have in flatui document. But the select dropdown is not functioning, can someone help me to make it work and pull value from the options?
We have made a custom select due to the inability of styling the system one. It is based on the Select2 plug-in with the source slightly modified to meet Bootstrap naming convention.
Select2 3.5.2
Check this:
http://select2.github.io/select2/
$("#selectList")
.on("change", function(e) { log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed})); })
If you read the documentation well you will notice you have manually add a select2 call to transform all selects.
E.g. like this:
$( document ).ready(function() {
$("select").select2({dropdownCssClass: 'dropdown-inverse'});
});