I have an associative array like below which I want to bind with my dropdown:
{
"Item1": [
{
"title": "Item1",
"choices": [
"Egg",
"burger",
]
}
],
"Item2": [
{
"title": "Item2",
"choices": [
"Pizza",
"Rice",
]
}
]
}
I am trying to bind dropdown based on this associative array, but the problem is it is displaying as object object
.
I want to show title in dropdown for each of the item like below:
Item1
Item2
I have tried to take reference from below SO question but it didn't work out:
Angularjs ng-options with an array of key-pair
var app = angular.module("myApp", []); app.controller("MyController", function ($scope) { $scope.item= { "Item1": [ { "title": "Item1", "choices": [ "Egg", "burger", ] } ], "Item2": [ { "title": "Item2", "choices": [ "Pizza", "Rice", ] } ] } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <ul ng-app="myApp" ng-controller="MyController"> <select ng-model="myItem.title" ng-options="key as value for (key , value) in item"> <option value="">Select Items</option> </select> </ul>
It should be like to this:
ng-options="value as key for (key , value) in item">
var app = angular.module("myApp", []); app.controller("MyController", function ($scope) { $scope.item= { "Item1": [ { "title": "Item1", "choices": [ "Egg", "burger", ] } ], "Item2": [ { "title": "Item2", "choices": [ "Pizza", "Rice", ] } ] } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <ul ng-app="myApp" ng-controller="MyController"> <select ng-model="myItem.title" ng-options="value as key for (key , value) in item"> <option value="">Select Items</option> </select> {{myItem.title}} </ul>
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.