I am trying to use an array of objects to show in a drop down list. Here is the json file
{
"list": [
{
"product": "Test1 ",
"Name": "Test 1 Name",
"countries": [{"countryId": 53,"countryName": "Unites States"}]
},
{
"product": "Test 2",
"Name": "Test 2 Name",
"countries": [{"countryId": 54,"countryName": "Canada"}]
}
]
}
I would like to show a drop down that list the countries using the countryName to show in the dropdown and use countryId as value.
You should first try some code, and if you fail to achieve what you tried, then ask a question.
Here is an answer assuming you tried some code.
Use select as
select as:
Using select as will bind the result of the select expression to the model, but the value of the and html elements will be either the index (for array data sources) or property name (for object data sources) of the value within the collection. If a track by expression is used, the result of that expression will be set as the value of the option and select elements.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-options="item.countries[0].countryId as item.countries[0].countryName for item in records.list" ng-model="selected">
<option value="">Select</option>
</select>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = {
"list": [
{
"product": "Test1 ",
"Name": "Test 1 Name",
"countries": [{"countryId": 53,"countryName": "Unites States"}]
},
{
"product": "Test 2",
"Name": "Test 2 Name",
"countries": [{"countryId": 54,"countryName": "Canada"}]
}
]
}
});
</script>
</body>
</html>Check out the select documentation. Angular has a couple ways of doing select inputs.
Any way you do it, you will need to save the "list" object to $scope in your JS file. E.g. $scope.list = [...]
Then, one way of doing the select is using ng-options:
<select ng-options="item.name for item in list track by item.product" ng-model="userChoice"></select>
Your other option is to use ng-repeat on a regular option tag:
<select ng-model="userChoice">
<option ng-repeat="item in list" value="item.product">{{item.name}}</option>
</select>
These are roughly equivalent, but not exactly. You will find that if you use ng-repeat it is difficult to have a "default" option selected. If you use ng-options it is difficult to add custom fields that are not in the model, like "other" or "none".
