我正在尝试从 JSON 填充选择元素,但 JSON 的格式使得键包含有值(value)的信息。 我无法控制数据格式。
我正在尝试迭代 JSON 并获取数组中顶级对象的键名称。问题是,因为它是一个对象,所以我似乎无法只获取它的名称——由于作用域的原因,Object.keys() 在 ng-options 中不起作用。
我尝试了以下多种变体,但没有成功。
<select ng-model="$ctrl.vals"
ng-options="val as key for (key, val) in $ctrl.data"
ng-change="$ctrl.onChange()" name="{{$ctrl.name}}"
size="{{$ctrl.data.length}}" multiple>
</select>
上面返回“0”,因为它的格式为0:[object object]。我能够得到的最接近的是返回的 [Object Object],但我想要该对象的 key ,并且不确定如何获取它。
我的数据格式如下(示例数据,不是真实的):
{
"Games": [{
"Name": "Warhammer 40k 8th Edition",
"Factions": [{
"Space Marines": {
"Units": [{
"Name": "Primaris Space Marine Captain",
"Number": 1,
"Cost": -1,
"Ability": "When captain enters play you win",
"AddOns": [{
"Name": "My AddOn",
"Cost": 0,
"Text": "Add an extra Captain",
"IsSelected": false
}],
"Gear": [{
"Name": "Frag Grenade",
"Cost": 0
}]
}]
}
}]
}]
}
在上面的 JSON 上下文中,我想传入 Factions 并查看文本“Space Marines”作为选项。 我错过了什么?
最佳答案
如果代码片段中的 $ctrl.data
引用您所编写的 "Factions"
属性值,则 ng-options
您使用的表达式不兼容(即 ... for (key, value) in ...
形式需要 $ctrl.data
为对象,但它不是)。
接下来,您应该使用 ng-options 的数组表达式形式,然后您可以提供附加函数来提取当用户选择特定选项时将绑定(bind)的标签和模型。
您可以这样做:
angular
.module('app', [])
.controller('ctrl', function () {
const $ctrl = this;
$ctrl.modelFor = function (obj) {
const [key] = Object.keys(obj);
return key ? obj[key] : null;
};
$ctrl.labelFor = function (obj) {
const [key] = Object.keys(obj);
return key;
};
$ctrl.data = [{
"Space Marines": {
"Units": [{
"Name": "Primaris Space Marine Captain",
"Number": 1,
"Cost": -1,
"Ability": "When captain enters play you win",
"AddOns": [{
"Name": "My AddOn",
"Cost": 0,
"Text": "Add an extra Captain",
"IsSelected": false
}],
"Gear": [{
"Name": "Frag Grenade",
"Cost": 0
}]
}]
}
}];
});
<div
ng-app="app"
ng-controller="ctrl as $ctrl">
<select
ng-model="$ctrl.vals"
ng-options="$ctrl.modelFor(obj) as $ctrl.labelFor(obj) for obj in $ctrl.data"></select>
<pre>{{ $ctrl.vals }}</pre>
</div>
<script src="https://unpkg.com/angular@1.7.8/angular.min.js"></script>
顺便说一句,你的数据看起来有点奇怪。如果 $ctrl.data
的每个项目可以有多个键,那么此方法将任意选择第一个(即迭代键时不能保证顺序)。
关于javascript - 获取 select 中键的名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57949449/