My select box is working fine when the variable item.ativo_retencao.id exists correctly.
<select name="ativo_retencao" v-model="item.ativo_retencao.id" class="form-control m-input">
<option v-for="ativo in ativos" v-bind:value="ativo.id">#{{ ativo.title }}</option>
</select>
So when it does not exists, I want to not define (or set null) the v-model property.
Is that possible?
you can use an ternary to do this:
<select name="ativo_retencao" :v-model="item.ativo_retencao.id ? item.ativo_retencao.id : ''" class="form-control m-input">
<option v-for="ativo in ativos" v-bind:value="ativo.id">#{{ ativo.title }}</option>
</select>
v-model is just syntactic sugar (code below applies just for select element):
v-model="item.ativo_retencao.id"
..is same as
:value="item.ativo_retencao.id" v-on:change="item.ativo_retencao.id = $event.target.value"
...so if you don't have a value you want to bind to, just don't render the select at all
<select v-if="item.ativo_retencao.id" name="ativo_retencao" :v-model="item.ativo_retencao.id" class="form-control m-input">
<option v-for="ativo in ativos" v-bind:value="ativo.id">#{{ ativo.title }}</option>
</select>
Related
i have this user.model.ts, Ihave a list of users that I can edit by clicking on a button that filters the user's data and puts it in a modal of bootstrap, with the [ngModel] in select tag i can get the country of my user but when i change the country and submit the form I receive the current country but not its id, it should be noted that when I use [value] in the option it does not show me the current country, how can i get the value and not the name? Thanks.
in user.component.ts
updateUser(formActualizarTeam) {
console.log(this.user);
}
in user.model.ts
export class UserModel{
name: string;
idCountry: number;
}
in user.component.html
<form
#formUpdate="ngForm"
(ngSubmit)="updateUser(formUpdate)">
<select
id="country"
name="idCountry"
class="form-control"
[(ngModel)]="user.idCountry">
<option *ngFor="let c of countries">{{ c.name }}</option>
</select>
</form>
I think you need to use the [value] attribute to match the options to select ngModel
then the code will be (if you have idCountry in countries array)
<select id="country" name="idCountry" class="form-control [(ngModel)]="user.idCountry">
<option *ngFor='let c of countries' [value]='c.idCountry'>{{ c.name }}</option>
</select>
You need bind [value] to idCountry , also to set default value the selected value should match some option value :
<select
id="country"
name="idCountry"
class="form-control"
[(ngModel)]="user.idCountry">
<option *ngFor="let c of countries" [value]="c?.idCountry">{{ c?.name }}</option>
</select>
Also to load the default value there are two option:
component.ts
ngOnInit(){
this.user['idCountry'] = this.countries[0]['id']; // set this after country data is loaded
}
OR
this.user['idCountry'] = '';
component.html
<select
id="country"
name="idCountry"
class="form-control"
[(ngModel)]="user.idCountry">
<option value="" [disabled]="true"> Select country</option> // set some placeholder
<option *ngFor="let c of countries" [value]="c?.idCountry">{{ c?.name }}</option>
</select>
You have to set [value] for your option tag like below [value]="c.idCountry"
<form
#formUpdate="ngForm"
(ngSubmit)="updateUser(formUpdate)">
<select
id="country"
name="idCountry"
class="form-control"
[(ngModel)]="user.idCountry">
<option *ngFor="let c of countries" [value]="c.idCountry">{{ c.name }}</option>
</select>
</form>
you will get value now try priting it
updateUser(ngform){
console.log(ngform.form.value)
}
You can get selected value by using (change) event.
In your html:
<select (change)="onChange($event)"
id="country"
name="idCountry"
class="form-control">
<option *ngFor="let c of countries">{{ c.name }}</option>
</select>
In you .ts:
onChange(e: any) {
console.log(e.target.value);
}
This is the select option what I have coded.
<select class="form-control select-search" name="selectedUser" id="selectedUser" required style="width: 200px;">
<option value="" selected> Select ID </option>
#foreach($users as $user)
<option value="{{ $user }}" class="text-capitalize">{{ $user->name }}</option>
#endforeach
</select>
I'm using Laravel here, and please do explain with related ones
php/laravel is used to generate a template written in html which will be send to the browser. Then you need to define a strategy on client side to manipulate your data.
No javascript
You can have a <form method="post" action="process.php"> tag which on submit will send to process.php form's data, including the selected value.
Vanilla JS
Using pure javascript, you can access the <select> using getElementById('selectedUser') like this :
var e = document.getElementById("selectedUser");
var strUser = e.options[e.selectedIndex].value;
React
You will need to create a react component to render your form, and then can use a onChange event to access the value and store it on a state component. Might be worth checking the react documentation for further exemples with forms and the select tags.
Try this:
<select class="form-control select-search" name="selectedUser" id="selectedUser" required style="width: 200px;">
<option value="" #if(null == Request::old('selectedUser')) selected #endif> Select ID </option>
#foreach($users as $user)
<option value="{{ $user->id }}" #if($user->id == Request::old('selectedUser')) selected #endif class="text-capitalize">{{ $user->name }}</option>
#endforeach
</select>
Edit:
You can also use ternary operator instead of if statement in blade like:
{{ $user->id == Request::old('selectedUser') ? 'selected': '' }}
In the past I was able to pass out the 'object' that was used for the select options. I'd like to capture that information off a regular select, but I cannot remember how.
So When you do an *ngFor in your select option, you specify a N of N's like this
<option *ngFor="let thing of things" value= {{thing.name}}>
{{thing.family}} - {{thing.name}}
</option>
I'm hoping I can get that 'whole' thing that was selected, by calling a function on change.
<select class="form-control input-sm "
(change)="changeThing($event)"
name="thing"
formControlName="thing" >
<option *ngFor="let thing of things" value= {{thing.name}}>
{{thing.family}} - {{thing.name}}
</option>
</select>
because I want to change some form options based on the 'family' of the thing, not the value that gets passed.
my function looks like this.
changeThing (thing) {
console.log('thing:', thing);
selectedFamily = ??;
}
The $event is probably the wrong thing to be looking at - I can get the value selected there, but I cannot find the whole "thing" that was selected.
Thanks for any help.
You can do that with the help of index
Template Side :
<select class="form-control input-sm "
[(ngModel)]="selectedValue"
(change)="changeThing($event.target.value)"
name="thing" >
<option *ngFor="let thing of things; let i = index;" [value]="i">
{{thing.family}} - {{thing.name}}
</option>
</select>
Component Side :
changeThing(index){
alert(this.things[index].family +' '+this.things[index].name );
console.log(this.things[index]);
}
WORKING DEMO
I hope it will help
<option *ngFor="let thing of things" value= {{thing}}>
{{thing.family}} - {{thing.name}}
</option>
You can use ngModel with ngModelChange
<select [(ngModel)] ="selectedType" (ngModelChange)="changeThing(selectedType)">
<option *ngFor="let thing of things" [ngValue]="thing ">
{{type.name}}
</option>
</select>
I tried using ng-change on select but the problem is, I need to send ticket.id to the method but, ticket.name to model.
<select name="ticketAttendeeMapping"
ng-model="attendee.ticketTypeName"
class="form-control">
<option ng-repeat="ticket in inTransitionTickets | filter: greaterThan('countRemaining', 0)"
ng-value="ticket.name"
ng-click="onAttendeeTicketmapping(ticket.id, $parent.$index)">
{{ticket.name}}
</option>
</select>
I also tried doing this:
<select name="ticketAttendeeMapping"
ng-model="attendee.ticketTypeName" class="form-control"
ng-options="ticket.name as ticket.name for ticket in inTransitionTickets | filter: greaterThan('countRemaining', 0)"
ng-change="onAttendeeTicketmapping(ticket.id, $index)">
<option value="" disabled>Choose Your Ticket</option>
</select>
The easiest way is to just use the object in the model:
<select name="ticketAttendeeMapping" ng-model="attendee.ticket" class="form-control" ng-options="ticket.name for ticket in inTransitionTickets" ng-change="change(attendee.ticket.id)">
</select>
Then you can access the name by using $scope.attendee.ticket.name and you can access the id by using $scope.attendee.ticket.id
Plunkr
try to do this:
<select name="ticketAttendeeMapping" ng-model="attendee.ticketTypeName" class="form-control" ng-options="ticket.name as ticket for ticket in inTransitionTickets | filter: greaterThan('countRemaining', 0)" ng-change="onAttendeeTicketmapping(attendee.ticketTypeName, $index)">
<option value="" disabled>Choose Your Ticket</option>
</select>
now you will get ticket i.e."attendee.ticketTypeName" object in ur ng-change method. where u can get its "id"
I am not sure, If what I have done here is what was originally asked by OP.
We can't use ng-options here simply!!
because while we use "ng-options" it restricts our access to current selected Json element to the properties explicitly mentioned in ng-options, on the contrary ng-repeat gives you complete access to current Object.
<select name="ticketAttendeeMapping"
ng-model="SelectedTicketNameFromngModel"
class="form-control">
<option ng-repeat="ticket in ticketJson "
ng-value="ticket.name"
ng-click="alertMe(ticket.id)">
{{ticket.name}}
</option>
</select>
$scope.SelectedTicketNameFromngModel = '';
$scope.selectTicketIdFromMethod = '';
$scope.ticketJson = [{'name':'tick1','id':'t1'},{'name':'tick2','id':'t2'},{'name':'tick3','id':'t3'}];
$scope.alertMe = function(tId){
$scope.selectTicketIdFromMethod = tId;
}
http://jsfiddle.net/HB7LU/16124/
I have html.
<select ng-model="user.role" class="form-control" name="role" >
<option value="">Select Role</option><option ng-repeat="role in roles" value="{{role.authority}}">{{role.authority}}</option> </select>
Now roles is a list and role.authority is string. i want to set default selected if role.authority==MYROLE then set to default, which is in role.authority.
How can i do
You have to assign the same value to select model inside controller, in your case it would be something like this
$scope.user.role = $scope.roles[0].authority
or with use of ngSelected
<option ng-repeat="role in roles" value="{{role.authority}}" ng-selected="role.authority == 'defaultValue'">{{role.authority}}</option>