I try to use ngOptions Angular. I want to send parameter to back-end to send value only not object.
Here is my code:
<div class="form-group">
<label>Parent Menu</label>
<select class="form-control" ng-model="admin_asset.parent_id" ng-options="parent.title for parent in parent_asset_options">
<option value="">-- choose parent --</option>
</select>
</div>
When I select the option, the output shows:
"parent_id": {
"id": 1,
"title": "Index Assets"
}
I just want to send value 1 only. So the result should be:
"parent_id": 1
I have tried to another tutorial but I did not have solution. Thanks
You can use select as
<div class="form-group">
<label>Parent Menu</label>
<select class="form-control" ng-model="admin_asset.parent_id" ng-options="parent.id as parent.title for parent in parent_asset_options">
<option value="">-- choose parent --</option>
</select>
</div>
It's necessary to extend you ng-options expression with some extra fields.
ng-options="parent.id as parent.title for parent in parent_asset_options"
more examples
Related
The goal is to select users according to the option chosen in the first select.
It works fine the first time you select that type of user. But when I change the user type and go back to the previous one, it doesn't show the options in the select. But through the inspect element it appears that the option has the "selected" attribute
<label for="UserType" class="col-md-2 control-label">User Type nbsp;<span class="text-danger small">*</span></label> <div class="col-md-4">
<select class="select2_demo_1 form-control" id="UserType" name="UserType">
<option value='0' selected disabled hidden>-- Selecionar --</option>
<option value="1">Boss</option>
<option value="2">Admin</option>
<option value="3">User</option>
</select>
<label for="Users" class="col-md-2 control-label">Users <span class="text-danger small">*</span></label><div class="col-md-10">
<select id="Users" name="Users" class="select2_demo_1 form-control" multiple style="width:100%">
<option data-type='1' value="1" >User Boss</option>
<option data-type='2' value="2" >User Admin</option>
<option data-type='2' value="3" >User Admin 2</option>
<option data-type='3' value="4" >User</option>
</select>
$('#UserType').on('change', function() {
var UserType = $(this).val();
$("select#Users option:selected").attr("selected",false);
$("select#Users option[data-type="+ UserType +"]").attr("selected","selected");
$("#Users").select2();
});
$('#UserType').trigger('change');
------ Solution ------
Change the code segment
$("select#Users option:selected").attr("selected",false);
$("select#Users option[data-type="+ UserType +"]").attr("selected","selected");
$("#Users").select2();
by the following
$('#UserType').select2('destroy').find('option').prop('selected', false).end().select2();
$('#UserType').select2('destroy').find('option[data-type='+ UserType+']').prop('selected', 'selected').end().select2();
You may think to add selected="true" and then change it to false when you apply the function attr()
I want to assign value to a variable when a user picks a choice in a dropdown in Odoo 11 Web Template. So when a user has done clicking the dropdown then a value will be assigned with a value accordance to user pick
<div class="col-md-3 col-sm-3">
<select class="form-control" id="university_id" name="university_id">
<t t-foreach="universities" t-as="university">
<option t-att-value="university.id"><t t-esc="university.name"/><t set="var_univ" t-value="university.name"/></option>
</t>
</select>
</div>
I want to set a value in var_univ variable with the name of the university. How can I achieve this?
please try with following :
<div class="col-md-3 col-sm-3">
<select class="form-control" id="university_id" name="var_univ">
<t t-foreach="universities" t-as="university">
<option t-att-value="university.name">
<t t-esc="university.name"/>
</option>
</t>
</select>
</div>
Make sure above div tag is in Form View with action.
Thanks !
I am showing a simple drop down from list of string. I always have an empty dropdown option available even if i do't want to have it. As shown in image
//predefined values for brandingSpaceType
private brandingSpaceTypeValues: string[] = ["Mobile Shop", "Supermarket",
"Shop In Shop", "Shop On Wheel", "Kiosk", "Others"]
private selectedBrandingSpaceType: string = this.brandingSpaceTypeValues[2];
And here is html
<div class="field">
<select class="form-control" [(ngModel)]="selectUndefinedOptionValue"
name="brandingSpaceType" [disabled]="brandingSpaceTypeStatus.readonly">
<option [selected]="selectedBrandingSpaceType == x" *ngFor="let x of
brandingSpaceTypeValues" [value]="x">{{x}}<option>
</select>{{selectUndefinedOptionValue}}
</div>
Problem is in your html. You have to close your option tag properly like</option>
<option [selected]="selectedBrandingSpaceType == x" *ngFor="let x of
brandingSpaceTypeValues" [value]="x">{{x}}</option>
Try this it will definitely solve your problem.
Just add this to your select
<option disabled hidden style='display: none' value=''></option>
disabled makes option unclickable.
style='display: none' to not displayed in older browsers.
<div class="field">
<select class="form-control" [(ngModel)]="selectUndefinedOptionValue"
name="brandingSpaceType" [disabled]="brandingSpaceTypeStatus.readonly">
<option disabled hidden style='display: none' value=''></option>
<option [selected]="selectedBrandingSpaceType == x" *ngFor="let x of
brandingSpaceTypeValues" [value]="x">{{x}}<option>
</select>{{selectUndefinedOptionValue}}
</div>
I have created a reactive form which has a form array. A Form Group is pushed into the form array on a button click. So every button click generates a section of html on screen.
This form group contains 2 drop down lists having parent-child relation i.e. selection of item in parent drop down decides values to be populated in child drop down.
When I select a value in parent drop down change event fetches results for child but this has to be limited to the scope of the specific form array element. Currently change event fetches data and sets values for child drop downs in each form array element. This is a basic structure of my mark up
<form [formGroup] = "mainForm" (ngSubmit)="savedata()">
<div>some form control</div>
<div formArrayName = "myArray" *ngFor="let arrayitem of myArray.controls";let i = index">
<div [formGroupName] = "i">
<div>
<select class="form-control" (change)="onSelect($event.target.value)" id="{{'header' + i}}" formControlName="parentdrpdown">
<option value="" disabled selected hidden>Select a Parent...</option>
<option *ngFor="let pitem of parentdrpdown"
value={{pitem.id}}>
{{pitem.name}}
</option>
</select>
</div>
<div>
<select class="form-control" (change)="onSelect($event.target.value)" id="{{'header' + i}}" formControlName="childdrpdown">
<option value="" disabled selected hidden>Select a Child...</option>
<option *ngFor="let citem of childdrpdown"
value={{citem.id}}>
{{citem.name}}
</option>
</select>
</div>
</div>
</div>
constructor(private fb:
FormBuilder, private _segService: SegmentService) {
this.parentdrpdown= this._segService.getparentValues();
onSelect(pid) {
this.childdrpdown= this._segService.getChildSegment()
.filter((item) => item.parentid == pid);
}
parentdrpdown and childdrpdown are properties declared in component and they are loaded with values using http get request to a web server
Use below snippet for the code in reactive form in case of select tag.
<h1>My Application</h1>
<select formControlName="selectedValue">
<option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>
I have the following json
[{"name":"Male","code":"1"},{"name":"Female","code":"2"}]
<label id="labelPersonalInformationExtra" class="item item-input item-stacked-label">
<span id="inputLabel" class="input-label">Gender</span>
<select id="dropDownPersonalDetails" ng-options="gender.name for gender in genders" ng-model="gender" ng-change="updateGender(gender)" >
<option style="display:none;" value="" disabled>{{genderPlaceholder}}</option>
</select>
</label>
What I wanted to do is have the placeholder to show the last option they chose but what happens is that the value becomes duplicated. If their last selected choice was female. The drop down would show as:
Female
Female
Male
How do I point their selected value to a value in my json so the drop down shows directly that.
Added option for placeholder will remain as is, you can't remove it dynamically. I'd rather prefer to give a generic text to placeholder of select like Select a gender. And then for preselected Female option you could do $scope.gender = $scope.genders[1] inside your controller.
Markup
<label id="labelPersonalInformationExtra"
class="item item-input item-stacked-label">
<span id="inputLabel" class="input-label">Gender</span>
<select id="dropDownPersonalDetails" ng-model="gender"
ng-change="updateGender(gender)"
ng-options="gender.name for gender in genders">
<option value="" disabled>Select a gender</option>
</select>
</label>
Demo Plunker