I'm tryin to use a select
with ng-options
to populate my dropdown. This is my JSON
{
"Food": [
{
"Name": Apple,
"HealthCondition": [
{
"Name": "High Blood Pressure",
"Eat": null
},
{
"Name": "High Cholesterol",
"Eat": null
},
{
"Name": "Heart Disease",
"Eat": null
},
{
"Name": "Osteoporosis",
"Eat": null
},
{
"Name": "Digestive Disorder",
"Eat": null
}
]
}
And this is my select <select class="chosen-select" ng-model="selectedValue" ng-options="x.HealthCondition for x in myResults.Food" multiple chosen></select>
and the result I'm getting is [object Object],[object Object],[object Object],[object Object],[object Object]
I'm trying to get a list of the Health Condition Names! Any help would be greatly appreciated. Stumped on this for hours. I'm using the Angular Chosen directive. This is working correctly if I just use the Name field like x.Name
but I want to get HealthCondition Name.
Any help would be greatly appreciated!
Some Observations :
Apple
should be a string against the name
key. Food
array in ng-options
it should be HealthCondition
.DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.jsonObj = {
"Food": [
{
"Name": "Apple",
"HealthCondition": [
{
"Name": "High Blood Pressure",
"Eat": null
},
{
"Name": "High Cholesterol",
"Eat": null
},
{
"Name": "Heart Disease",
"Eat": null
},
{
"Name": "Osteoporosis",
"Eat": null
},
{
"Name": "Digestive Disorder",
"Eat": null
}
]
}]};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select class="chosen-select" ng-model="selectedValue" ng-options="x.Name as x.Name for x in jsonObj.Food[0].HealthCondition" multiple chosen></select>
</div>