I'm getting the following:
Vue template code:
<select class="form-select" v-model="post_format.wpml_language">
<option v-for="(lang, index) in wpml_languages" :value="lang">{{lang}} {{index}}</option>
</select>
What I want; I want the value attribute of the option element to be the language code (en/es) and the text displayed to be the Language name
I'm not sure how to access the object in the vue code for it to display in the way I want. I've tried:
<select class="form-select" v-model="post_format.wpml_language">
<option v-for="(lang, index) in wpml_languages" :value="lang[index]">{{lang[index]}}</option>
</select>
Any help is appreciated
I recommend you to modify your object so that your code and language are separate values.
this.languages.filter(lang =>{
var code = Object.keys(lang)[0];
lang.code = code;
lang.value = lang[code];
});
This will make your code more readable. Codesandbox link for your reference.
You probably don't want lang[index], because you have nested objects.
In this instance, the actual loop index is not useful. For each member of 'lang', you most likely want the key to be your option value ("en") and the value to be the printed text ("English"). While the following is not the cleanest option, it will work:
<select class="form-select" v-model="post_format.wpml_language">
<option v-for="(lang, index) in wpml_languages" :value="Object.keys(lang)[0]">
{{ lang[0] }}
</option>
</select>
Related
I'm using vue-i18n to handle translations in my software. I'm trying to create a select input to change between languages. To do so, I'm using the following code:
<select class="form-control" v-model="$i18n.locale">
<option v-for="(key,value) in languages" v-bind:key="value" :value="value">
{{key}}
</option>
</select>
I want that my actual language ($i18n.locale) appears as selected in my select input. However, none of the languages is selected, as the following image shows. How can I solve this?
First argument in v-for is the value and second is the key.
Documentation.
So this should work:
<option v-for="(value, key) in languages" :key="key" :value="value">
You have an example in i18n's docs.
Or, since you want to use the values as keys (as they're unique & primitives):
<option v-for="lang in languages" :key="lang" :value="lang">
I have the following dropdown. I want to set All Patients as the default value.
<select [(ngModel)]="searchModel.careprovider">
<option [value]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [value]="user._id.$oid">
{{user.dn}}
</option>
</select>
My model is declared this way:
searchModel: any = { location: null, practice: null, name: '', careProvider: 0 };
I set the practiceUsers this way:
this._practice.getUsers(this.searchModel.practice).subscribe(result => {
this.practiceUsers = result;
this.searchModel.careProvider = 0;
});
No matter how I change it I always just get a blank option as the default. I've tried adding an object to the this.practiceUsers array after it is loaded, then setting the model value. I've tried setting the model value with and without quotes to see if a number or string made a difference. Everything I try still results in the default being the blank option.
In Angular 1 I would have used ng-options, but that is no longer available for Angular 2, and every example I find shows to use the ngFor for dropdowns.
Object attributes are case sensitive, in your object, attribute is called careProvider, but in your template, you are using searchModel.careprovider with lowercase p. I think you also have to use NgValue directive instead of value because you are using NgModel directive. So, this should work: it is not working
<select [(ngModel)]="searchModel.careProvider">
<option [ngValue]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [ngValue]="user._id.$oid">
{{user.dn}}
</option>
</select>
Try to use [selected] attribute. I solved similar problem this way:
<select>
<option *ngFor="let option of options" value="{{option.id}}" [selected]="option === selectedOption">
{{option.name}}
</option>
</select>
I hope this helps a little
<select class="form-control" id="policeid_country_id" name="policeid_country_id" formControlName="policeid_country_id">
<option [ngValue]="null">Select</option>
<option [ngValue]="country.id" *ngFor="let country of countries">{{country.country}}</option>
</select>
I've got a weird thing going on using a Select element with Vue JS:
The following code:
<select id="nameDd" v-model="name" >
<option v-for="n in names" v-bind:value="n.key" " >
{{ n.value }}
</option>
</select>
renders the Select without the Value attribute in the Options elements:
<select id="nameDd">
<option>Carol</option>
<option>Carl</option>
<option>Clara</option>
</select>
This of course means that the correct Option cannot be selected when required. In my scenario an entry in a table is clicked and the edit form is shown (using v-show) but the Select remains empty instead of selecting the right value. In the background, the v-model 'name' does have the right value.
Confusingly, as soon as I select one Option, it adds the Value attribute:
<select id="nameDd">
<option value="1">Carol</option>
<option value="2">Carl</option>
<option value="3">Clara</option>
</select>
Now the (even more) confusing part. This actually shows the Value attribute in the Option elements:
<select id="nameDd" v-model="name" >
<option v-for="n in names" v-bind:value="n.key+'X'" " >
{{ n.value }}
</option>
</select>
...but of course with an appended X, which again avoids the right Option being selected.
- Is this some VueJs feature that I don't get? What am I doing wrong?
Why is there a second double-quote (") after v-bind:value in the option tag?
<option v-for="n in names" v-bind:value="n.key" " >
I can't find any other issue with your code. I practically wrote the same code again and it worked. Here is a working jsFiddle for reference: https://jsfiddle.net/mani04/3x0z3vzk/
As you can see, I really don't have much code, just the 3 lines:
<select v-model="selectedPerson">
<option v-for="person in people" :value="person.key">{{person.name}}</option>
</select>
I don't know if the second double quote was causing the issue. Vue expects perfect markup so that it can do its model-view bindings properly. When I tried to put a stray double-quote like yours, I got a console error, not the missing option value that you noticed.
I hope this example helps to fix your code!
I want to make my ng-options element to display only the different value.
So now i have this.
But I want it to display only one by one value.
Example:
<select class="form-control" ng-model="main.singleProductListSelected">
<option value="test_pizza">Pizza Favorites</option>
<option value="test_pizza">Pasta</option>
<option value="test_pizza">Salads</option>
</select>
This is my html code
<select class="form-control"
ng-model="main.singleProductListSelected"
ng-options="singleOrdersProduct.category.name
for singleOrdersProduct in main.singleOrdersProductOptions">
</select>
Can I do this or i have to change the variable result?
Thanks!
<select class="form-control"
ng-model="main.singleProductListSelected"
ng-options="singleOrdersProduct.category.name for singleOrdersProduct in main.singleOrdersProductOptions | unique:'singleOrdersProduct.category.name'">
</select>
add unique: 'your item name here'
I would recommend lodash like library and create a array of unique value to use inside ng-options
inside controller
uniqueNames = _.uniq(_.pluck(main.singleOrdersProductOptions, 'name'))
use this uniqueNames inside select ng-options. Performance wise this would be good option
I have a number of items that get their data from a Json object and populate it using angular.
<select ng-model="MyCtrl.cargoList">
<option ng-repeat="cargo in MyCtrl.cargoList">{{ cargo.name }}</option>
</select>
And whenever I load the form, I get something like this in my console:
<select ng-model="MyCtrl.cargoList">
<option value="? object:25 "?></option>
<option value="">Gloves</option>
<option value="">Jacket</option>
<option value="">Shoes</option>
</select>
I can get the values to appear just fine, but I can't seem to get rid of the very first option. I don't mind the select box showing the very first element in the list, but I don't want it to be a blank line. How do I get rid of it?
You need to select 1st option by default on ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name" & ng-model name should not be same as that of your cargoList.
Markup
<select ng-model="MyCtrl.selectedCargo" ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name">
<option ng-repeat="cargo in MyCtrl.cargoList" value="cargo.name">{{ cargo.name }}</option>
</select>
Demo Plunkr
Use ngOption <option>
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.
I have used following expression
label for value in array
HTML
<select ng-model="MyCtrl.cargo" ng-options="cargo.name for cargo in MyCtrl.cargoList">
</select>
and In your controller set model value as first element of list
this.cargo = this.cargoList[0]
Also note: You can use MyCtrl.cargoList as model as well as array So you should use another variable to hold the model value.
Use ng-options instead of ng-repeat
<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList"></select>
You can fine tune the labels/values further if you like, check the documentation here - https://docs.angularjs.org/api/ng/directive/ngOptions
You can ng-init, or set the first value to defualt, something like
MyCtrl.selectedListItem = MyCtrl.cargoList[0]
So if you want a function to detect you have changed the value of the select you would use ng-change like so :
<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList" ng-change="selectChanged"></select>
In your controller
$scope.selectChanged = function(){
//apply your logic
};