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);
}
Related
I have built this simple dropDown list:
Here's its html definition:
<select class="form-control" id='0' (change)="retrieveValue($event.target)">
<option id='0'>{{ genericSpecific[params.node.id][0] }}</option>
<option id='1'>{{ genericSpecific[params.node.id][1] }}</option>
</select>
For retrieving the value:
updateChosenValue(event) {
console.log(event.value)}
But, I couldn't find a way to retrieve the id.
Any help?
Thank you!
Change HTML
<select class="form-control" id='0' (change)="retrieveValue($event)">
<option id='0'>A</option>
<option id='1'>B</option>
</select>
Update ts
retrieveValue(event) {
const selectEl = event.target;
const val = selectEl.options[selectEl.selectedIndex].getAttribute('id');
console.log(val)
}
https://stackblitz.com/edit/angular-yfb45a
Try this. this may help you to understand the logic.. but still you'll have to make this compatible to your angular code.
<select onchange="alert(this.options[this.selectedIndex].getAttribute('id'));" name="myname" class="myclass">
<option id="1" value="hi">click1</option>
<option id="2" value="hello">click2</option>
</select>
try this
<select class="form-control" id='0' (change)="retrieveValue($event.target)">
<option id='0' value='0'>{{ genericSpecific[params.node.id][0] }}</option>
<option id='1' value='1'>{{ genericSpecific[params.node.id][1] }}</option>
</select>
https://stackblitz.com/edit/angular-vo9cuj
I have array of city which is available on first select ng-change which I like to show in second option list;
But it does not show there.
In angular controller
mainApp.controller('addUserCtrl', function($scope,$http) {
$scope.getCities = function() {
$scope.citieslist = ["Nagpur", "Pune", "Latur", "Aurangabad"];
};
});
Select in HTML
<select ng-change="getCities()" ng-model="state" required>
<option value="Bihar">Bihar</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Delhi">Delhi</option>
</select>
<select name="city" required>
<option ng-repeat="city in citieslist">{{ city }}</option>
</select>
Thanks.
change it to
<select ng-repeat="city in citieslist" name="cityList" required>
<option >{{ city }}</option>
</select>
.controller('addUserCtrl', function($scope,$http) {
$scope.citieslist = ["Nagpur", "Pune", "Latur", "Aurangabad"];
$scope.getCities = function() {
$scope.citieslist = $scope.citieslist;
};
});
Try to use this code, you have assign a list inside getCities(), it will work at ng-change="getCities()" but can't assign value at ng-repeat. so you need to assign it out side method then you can assign it again inside method, then it will work. check the code in plunker
Change dropdown html code like below
<select name="citys" ng-repeat="city in citieslist" required>
<option>{{ city }}</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/
Hi I want a particular function to be called when anything is selected from a given dropdown. That function needs as an argument the value of the option selected. So far this is what I have got :
<label class="control-label col-lg-3">Action Type</label>
<div class="col-lg-9">
<select class="form-control" id="type" >
<option value="">Please Select</option>
<option value="SCHEDULE" ng-click="getHtml(/*SCHEDULE*/)">
SCHEDULE
</option>
<option value="HTTP" ng-click="getHtml(/*HTTP*/)" >
HTTP
</option>
<option value="RMQ" ng-click="getHtml(/*RMQ*/)">
RMQ
</option>
<option value="WFE" ng-click="getHtml(/*WFE*/)">
WFE
</option>
</select>
</div>
However this does not seem to be working. Can someone please help?
The method is in the controller as:
$scope.getHtml=function(option){
console.log("sent type is: "+type);
var type=$('#type').val();
//BLAH BLAH...
}
You should use ngChange and ngModel directive on select element.
ngChange: Evaluate the given expression when the user changes the input.
Example
<select class="form-control" id="type" ng-model='type' ng-change="getHtml(type)">
<option value="">Please Select</option>
<option value="SCHEDULE">SCHEDULE</option>
<option value="HTTP">HTTP</option>
<option value="RMQ">RMQ</option>
<option value="WFE">WFE</option>
</select>
DEMO
you need to use ng-change here,
first assign a model to select
ng-model="modelName" the modelName is a scope variable which has the value of select box,
second remove the ng-click="getHtml..) from options.
and using ng-change you can call a controller function with the value of modelName variable when the select box changing its value.
<select class="form-control" id="type" ng-change="getHtml(modelName)" ng-model="modelName">
<option value="">Please Select</option>
<option value="SCHEDULE">
SCHEDULE
</option>
.....
</select>
<select data-ng-model="userInf.role" class="span12" required>
<option value="" selected="selected" disabled="disabled">Choose one</option>
<option data-ng-repeat="role in roles" value="{{ role.text }}">{{ role.text }}</option>
</select>
angular
userService.getUser($scope.userInf,
function( data ) // success
{
$scope.userInf = {
username: data.userName,
firstname: data.firstName,
middlename: data.middleName,
lastname: data.lastName,
title: data.title,
organization: data.organization,
role: data.authorization.role,
dateOfBirth:data.dateOfBirth,
save: 'update'
};
},
Other fileds are coming but select value is not coming
In inspect element i can see
<select data-ng-model="userInf.role" class="span12 ng-pristine ng-valid ng-valid-required" required="">
<option value="? string:Analyst ?"></option>
<option value="" selected="selected" disabled="disabled">Choose one</option>
<!-- ngRepeat: role in roles --><option data-ng-repeat="role in roles" value="Analyst" class="ng-scope ng-binding">Analyst</option>
<option data-ng-repeat="role in roles" value="Admin" class="ng-scope ng-binding">Admin</option>
</select>
I know that Angular has the ng-init directive for this very purpose. Why don'y you try the ng-options directive? You can use the ng-init directive side by side with ng-options, and ng-options is a little more flexible than ng-repeat.
<select ng-model="userInf.role" ng-options="role for role in roles" ng-init="userInf.role = '' " class="span12 ng-pristine ng-valid ng-valid-required" required="">
<option value="" disabled="disabled">Choose one</option>
</select>
The ng-init will set your ng-model, which is the value of the options defined below, to whatever you want, in this case, setting your ng-model to '' which is the value of your first option. The ng-options will populate the rest of your options for you with the values in your array. You might need some setup to display the correct names and values in your options. Look here https://docs.angularjs.org/api/ng/directive/select
Yeah, I would do it like this:
var app = angular.module('app', [])
app.controller('exampleCtrl', function ($scope) {
$scope.options = ["a", "b", "c"]
$scope.selected = $scope.options[1]
})
<select ng-options="o for o in options" ng-model="selected"></select>
Option "b" will be selected on load
<select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>