I for the life of me cannot figure out how to set both the labal and the value of a select using an array
I have an array of countries
$scope.countries = [
{abbr:"US", name:"United States"},
{abbr:"CA", name:"Canada"},......
]
I want the select to generate as such
<select>
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>
However the closest I have been able to achieve is
<select>
<option value="1">United States</option>
<option value="2">Canada</option>
</select>
I've achieved that using
<select class="form-control" ng-options="country.Name for country in countries" ng-model="selectedCountry">
How do I assign the label AND the value using ng-options?
Without testing I think it's just
ng-options="country.abbr as country.name for country in countries"
For exact structure, you need to do ng-repeat through your <option><option> ng-options will never set the value which which you want, It will always set 0,1,2,3 etc.
HTML
<select ng-model="selectedCountry">
<option ng-repeat="country in countries" value="{{country.abbr}}" ng-bind="country.name"></option>
</select>
JSFiddle
Hope this could help you, Thanks.
Related
I have this select and the values are displayed correct but how to I get the value of the selected option in my function FilterByBrand()?
<select ng-model="selectedBrand" ng-change="FilterByBrand()">
<option ng-value="-1">--Alle Brands--</option>
<option ng-repeat="x in Brands" ng-value="{{x.opt_Brand.Id}}">{{x.opt_Brand.Name}}</option>
</select>
You don't use curly braces (interpolation) inside the ng-value. Check this answer for a great summary of when not to use interpolation - https://stackoverflow.com/a/50419144/5867572
<select ng-model="selectedBrand" ng-change="FilterByBrand()">
<option ng-value="-1">--Alle Brands--</option>
<option ng-repeat="x in Brands" ng-value="x.opt_Brand.Id">{{x.opt_Brand.Name}}</option>
</select>
How can I pre-select an option, when I have the options repeated using ng-repeat, as so:
<select data-ng-model="info.country" ng-change="changeCountry()" name="country" required>
<!-- <option selected disabled hidden value=''></option> -->
<option data-ng-repeat="country in countries" value="{{country.id}}">{{country.countryName}}</option>
</select>
The data-ng-model returns the number 3 , the method ng-change="changeCountry()" uses the same number in its implementation.
I need the pre-selected item to be 3 and not 1 (this will be reduced by 1, since it is an array, but I think you get the idea)
I need to pre-select the item. Is this possible, and how can one achieve such result?
CodePen here.
ng-repeat on <options> converts id to string. This is a reason why it doesn't work.
{"country":3} vs {"country":"3"}
You can solve it by using ng-options:
<select data-ng-model="info.country"
ng-change="changeCountry()" name="country"
ng-options="c.id as c.countryName for c in countries"
required>
</select>
I managed to achieve this by using ng-options:
<select ng-options="country.id as country.countryName for country in countries" ng-model="info.country" ng-change="changeCountry()" name="country" required></select>
Guys after I used the angular directive ng-options I got this result
<select name="users" id="users" ng-options="user.id as user.name for user in users" ng-model="user">
<option value="number:1" label="Developers">Ahmed</option>
<option value="number:2" label="Designers">Jon</option>
<option value="number:3" label="HR">Astm</option>
<option value="number:4" label="Doctor">Fady</option>
</select>
<select name="colors" id="colors" ng-options="color.code as color.name for color in colors" ng-model="color">
<option value="string:ff0000" label="Developers">Red</option>
<option value="string:ffffff" label="Designers">White</option>
<option value="string:000000" label="HR">Black</option>
</select>
why the option value contains the data type such as number:1 or string:ffffff ??
how I can remove the data type from it and keeping only the value ?
Add track by [id] at the end of ng-options.
In your case it would be:
ng-options="user.id as user.name for user in users track by user.id"
and
ng-options="color.code as color.name for color in colors track by color.code"
Right now there is not option in angular to remove that type. If you need that, use custom directive with ng-option as parent.
I'm struggling to understand to documentation for ngOptions
I have a simple array : ['code1' , 'code2'] and I just want to iterate over and construct option value and label as follow :
What I expect :
<select>
<option value="" class="">All</option>
<option value="code1">code1.label</option>
<option value="code2">code2.label</option>
</select>
What I've tried :
<select ng-model="select" ng-options="option + '.label' for option in ['code1', 'code2']">
<option value="">All</option>
</select>
What I get :
<select>
<option value="" class="">All</option>
<option value="0">code1.label</option>
<option value="1">code2.label</option>
</select>
See that values aren't what I want .. I tested almost all possible syntax of the documentation without success.
ps: I've simplified the code, but I use angular-translate to translate the received code and put that translation in the option label.
JsFiddle : http://jsfiddle.net/3ekAj/
I'm guessing what you want is:
<select ng-model="select" ng-options="option + '.label' for option in ['code1', 'code2'] track by option">
<option value="">All</option>
</select>
Fiddle: jsfiddle
I have the following object:
[
{"id":"150c67d4-952b-45b0-b287-f651a5f6d82b","name":"xx"},
{"id":"9001f011-3a0c-4d45-a0fb-eabb4c83ff83","name":"yy"},
{"id":"9b8b93af-cfef-451a-8dda-7373d9154f60","name":"zz"}
]
Here's my HTML:
<select
data-ng-model="option.selectedCreatedBy"
data-ng-options="item.id as item.name for item in option.userProfilesPlus">
<option style="display: none" value="">Select User</option>
</select>
The result is:
<select
data-ng-model="option.selectedCreatedBy"
data-ng-options="item.id as item.name for item in option.userProfilesPlus"
><option style="display: none" value="" class="">Select User</option>
<option value="0" selected="selected">*</option>
<option value="1">xx</option>
<option value="2">yy</option>
<option value="3">zz</option></select>
How can I make this so that the values stored are the actual id's ?
When you are using the ng-option to generate the option list, you don't have control over the values generated for options. For an array it is the index into the array.
If you want to have specific value in the option field, you have to use ng-repeat for it.
In any case, you should not be very concern about specific of html generated, angular can update model correctly in any case.