javascript - 获取 select 中键的名称

Question

我正在尝试从 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”作为选项。我错过了什么？

Answer 1

如果代码片段中的 $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 的每个项目可以有多个键，那么此方法将任意选择第一个(即迭代键时不能保证顺序)。