I have found lots of answers on here, but very frustatingly I am unable to execute it. Firstly to explain what I have done:
I have created an array with a list of country objects. In the html I am looping through the countries array and adding each value to a select box.
I just wish to show both the UK and the US, however with my code there is also a third option (an empty option).
How can I just have the 2 values in the array? This answer should work , but it is not showing the correct values in the html. Perhaps it is because I have been using ng-repeat, but perhaps I should be using ng-options as this answer would suggest?
Please see my code below.
CONTROLLER
this.countries = [
{name: "United Kingdom"},
{name: "United States of America"}
];
HTML
<select ng-model="ctrl.country">
<option ng-repeat="country in ctrl.countries" value="{{country.name}}">{{country.name}}</option>
</select>
To remove empty option you need to assign country
for ng-model="ctrl.country"
value from controller when load this page to show default selected value.
like:
this.countries = [
{name: "United Kingdom"},
{name: "United States of America"}
];
this.country = this.countries[0].name; // initially show "United Kingdom"
or need to create an another option with empty
value to show as selected
<select ng-model="ctrl.country">
<option value="">select one</option>// default to show
<option ng-repeat="country in ctrl.countries" value="{{country.name}}">{{country.name}}</option>
</select>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.