I want to show value on select option with ng-model but value doesn't show. This is my update page, so i must need ng-model from which i send my country_id also i need to show country name here is my code
<select data-ng-model="ticket[0].country_id" ng-option="x in ticket['get_country']"id="country">
<option value="{{ x.name }}">{{ x.name }}
</option>
</select>
this is the code from which i get the name of country from angularjs code
.then(
function successCallback(response) {
console.log(response.data['get_country'][0]['name']);
$scope.country = response.data['get_country'][0] ['name']
$scope.ticket = response.data;
},
function errorCallback(response) {
alert("Error. Try Again!");
}
You can use ng-options like this
<select data-ng-model="ticket[0].country_id" ng-option="x.name as x.name for x in ticket['get_country']"id="country"></select>
if you print the model, you can see the name of the item that what you selected.
Related
I have this drop down below and it has all the countries in it, but doesn't display the first value ('United States'). How can I get the first item to be the selected one?
Is it possible to have a conditional statement that sets 'selected' if index = 0? I know two bindings aren't possible, but I'm looking at other alternatives.
<div class="form-group">
<select id="country" class="form-control" formControlName="countryList">
<option *ngFor="let country of countryList;" value={{country}}>
{{country}}
</option>
</select>
</div>
and below is what I see in the page. No item is initially selected. It's blank until I select something!
Update - I'm trying this below, but it doesn't seem to work either.
[value]="country"
[selected]="country == 'United States' ? true : null"
CountryList looks like this
export class Countries {
countryList: string[] = ['United States', 'Afghanistan', 'Albania'];
CountryList() {
return this.countryList;
}
}
// to initialize it, in my component I do this
countryList: string[] = new Countries().countryList;
Assign initial value to the formControl which you want from the countryList.
ex:-
controlModel.controls['countryList'].setValue('United States');
So ...i have url (say... http://localhost:8080/website/country) that I target to get this list:
What i want is to populate dropdown with list of county names so user can pick one.
I also did dropdown in html
I am using Angular 2, i have service in which I set to get url from database
I'm sure that I have mistake, so need help :D Thanks
Edit: this is component, if could help
EDIT:
It seems that there is trouble in your component.
First of all, you have to trigger the request which will retrieve the countries and assign the response.
It will looks like following (note we assign the Observable):
#Component(...)
export class CompanyTemplatePopupComponent {
countries;
ngOnInit(){
countries = this.companyService.getCountries();
// or whichever method you need to retrieve the list of countries
}
}
Then in your template (note the use of async pipe):
<option *ngFor="let country of countries | async" [value]="country.id"> {{ country.name }} </option>
html code will be
<select #countriesSelect class=custom-dropdown">
<option selected disabled>Select Country</option>
<option *ngFor="let country of countries: [value]="country.id">{{country.name}}</option>
</select>
In ts code you have to getAllCountries() method in constructor or ngOnInit(). getAllCountries() is a method to fill the data of countries to dropdown list
getAllCountries() {
this.getHttp().get(this.url)
.map( (response) => {
this.countries = response;
console.log(response); // To check countries is coming or not!
})
}
I am running into an issue with a select being displayed
I have a samplemodel value that is an interger in the database. As of right now, I want to do a select as below, but I want it to display the string. The value will be displayed in my two way binding markup but when I select a string of yes, no, or na in the select value, it doesn't display the string or anything at all.
How do I get my value to display the string vs a int.
{{samplemodel}}
<select class="input-large input-large-altered" ng-model="samplemodel">
<option value="1">Yes</option>
<option value="2">No</option>
<option value="3">NA</option>
</select>
Try using ng-options on your select. You can choose what you would like your model bound to that way.
Example:
$scope.myArray = [
{Val: 1, Display: 'Yes'},
{Val: 2, Display: 'No'},
{Val: 3, Display: 'NA'}
];
$scope.samplemodel = "Yes";
//Gives the Display string of the object
{{samplemodel}}
<select class="input-large input-large-altered" ng-options="item.Display as item.Display for item in myArray" ng-model="samplemodel">
</select>
OR
//Gives the val of the object
<select class="input-large input-large-altered" ng-options="item.Val as item.Display for item in myArray" ng-model="samplemodel">
</select>
OR
//Gives the whole object
<select class="input-large input-large-altered" ng-options="item as item.Display for item in myArray" ng-model="samplemodel">
</select>
Here is the plunkr to give you a full example.
Also to explain ng-options it works like so ng-options="[value] as [display] for [object] in [array]"
Update Please use #Ohjay44's method as it is more performant. I will leave this up as it is still a valid optin.
You would have to use a filter:
HTML
{{samplemodel | stringFromInt}}
JS
app.filter('stringFromInt', function(){
return function(input) {
if (!input){
return null;
} else {
return {1: 'Yes', 2: 'No', 3: 'NA'}[input];
}
}
});
https://plnkr.co/edit/DbQzDMSvCtyBWGSxvleU?p=preview
I have two select option HTML: Category, subCategory, and subCategory must be dependence of Category ( A item as Category contains many subCategory).
My code to show Category:
<select id="categoryID">
#foreach($category as $item)
<option id="{{$item->id}}">{{$item->name}}</option>;
#endforeach
</select>
subCategory:
<select id="sub_category">
#foreach($sub_category as $item)
<option>{{$item->name}}</option>;
#endforeach
</select>
I want to when anyone selected a item in Category, it will call Web service like '/change_category', and return new variable $sub_category dependence ID of Category you selected.
Don't think about function return new variable $sub_category, I just want to ask: How to call Web service when selected option? Thanks.
<select id="categoryID" onchange="changeCategory(this)">
#foreach($category as $item)
<option id="{{$item->id}}">{{$item->name}}</option>;
#endforeach
</select>
<script type="text/javascript">
function changeCategory(id){
var category = id[id.selectedIndex].id;
$.ajax({
type: "POST",
url: url,
data: {
id: category
},
success: function (data) {
//push data here
}
});
}
</script>
I have a select box:
<select id="issue-users_id" class="form-control" name="Issue[users_id]">
<optgroup label="user">
<option value="16">user</option>
<option value="24">robo</option>
</optgroup>
<optgroup label="group">
<option value="15">123123</option>
</optgroup>
</select>
when submit form I want to have array like this:
Issue[users_id][user] = value (16, 24)
or Issue[users_id][group] = value (15)
it means I want to get value of optgroup
All is possible is manualy prepare data and send it to server. On submit get form data and replace Issue.user_id param:
var selected = $('#issue-users_id').find(":selected"),
optgroup = selected.closest('optgroup');
if ( optgroup.attr('label') == 'group' ) {
form_data.Issue.users_id = {
group: selected.val()
}
} else {
form_data.Issue.users_id = {
user: selected.val()
}
}
$.ajax(/* send form */);
You can retrieve group through user id. User id is unique and can belong to one or more groups, so you can create method for this in according model, for example:
public function getGroup()
{
// return group name string here based on $this->id
}
Getting the value of optgroup from $_POST array is illogical.