bumblebee bumblebee - 26 days ago 20
AngularJS Question

Use / modify array of objects to use in ngRepeat for dropdown list

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.

Answer

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.

This is the reference

<!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>

Comments