I am looking to populate select option with values from a basic json array.
The example I have is a country select. Each country has an id element and a name plus other fields that I can ignore. Basically I would like to say put one value in the value=""
field and another between the <option>tags</option>
html snippet
<div ng-controller="DemoCtrl">
<p>populate select options with ajax</p>
<select id="Country" name="Country" class="form-control" size="10"
ng-model ="chooseCountries">
<option ng:repeat="country in chooseCountries" value="{{country.id}}">
{{country.name}}
</option>
</select>
</div>
javascript snippet
'use strict';
function DemoSelectCtrl($scope) {
$scope.chooseCountries=[
{countryId : 1, name : "France - Mainland", desc: "some description" },
{countryId : 3, name : "Gibraltar", desc: "some description"},
{countryId : 3, name : "Malta", desc: "some description"}
];
});
I have put it together here js fiddle.. I think I'm missing something
In this above example you are missing value
attribute change this value="{{country.countryId}}"
. try this
<select id="Country" name="Country" class="form-control" size="10" ng-model ="chooseCountries">
<option ng:repeat="country in chooseCountries" value="{{country.countryId}}">
{{country.name}}
</option>
</select>
and see the example click here