【发布时间】:2018-02-06 00:39:58
【问题描述】:
我有一个如下所示的关联数组,我想将其与我的下拉列表绑定:
{
"Item1": [
{
"title": "Item1",
"choices": [
"Egg",
"burger",
]
}
],
"Item2": [
{
"title": "Item2",
"choices": [
"Pizza",
"Rice",
]
}
]
}
我正在尝试基于此关联数组绑定下拉菜单,但问题是它显示为 object object。
我想在下拉列表中显示每个项目的标题,如下所示:
Item1
Item2
我试图参考下面的 SO 问题,但没有成功:
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>
【问题讨论】:
-
您的项目详细信息(带有标题、选项的对象)是否需要包装在数组中?没有那个数组包装器会更容易解析。
-
@jdubjdub 实际上我有各种类型的项目,如法语、意大利语、中文,其中每个项目都有一些选择,即我将这些项目作为关联数组
标签: javascript angularjs