如何绑定两个选择输入并为每个输入设置初始值

Question

我在范围内有此地图： $scope.graphEventsAndFields 。 其中的对象看起来像这样： {'event_name': ['field1', 'field2', ...]} （因此，键是事件名称，值是该事件的字段数组。

我要完成以下工作：有两个选择输入，一个输入事件，一个输入该事件的字段。 当我更改事件类型时，可用字段将相应地更改。 另外，我希望默认情况下，事件输入已选择地图中的第一个键，而字段输入已选择了上述事件的第一个字段。 在这些输入下方，将有一个搜索按钮，该按钮必须调用具有两个选定值的函数。 到目前为止，我有以下代码：

前端：

<div class="form-horizontal">
    <div class="form-group" style="margin-bottom: 5px;">
        <label class="control-label col-xs-2" style="font-weight: normal;">Event: </label>
        <div class="col-xs-10">
            <select class="form-control indexDropDown ng-pristine ng-valid pulseControl ng-touched"
                    ng-options="key for (key, value) in graphEventsAndFields"
                    ng-model="selectedEventForSearch" ng-change="uiSelectIndex()">
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-2" style="font-weight: normal;">Field: </label>
        <div class="col-xs-10">
            <select class="form-control indexDropDown ng-pristine ng-valid pulseControl ng-touched"
                    ng-options="field for field in selectedEventForSearch"
                    ng-model="selectedFieldForSearch" ng-change="uiSelectIndex()">
            </select>
        </div>
</div>

<div class="btn btn-primary" ng-click="search(selectedEventForSearch, selectedFieldForSearch)">Search</div>

我看到对于（键，值）迭代，默认情况下，for循环跟踪值。 因此，我在控制器中的代码如下所示：

let firstKey = Object.keys($scope.graphEventsAndFields)[0];
$scope.selectedEventForSearch = $scope.graphEventsAndFields[firstKey];

但是，这仅选择事件输入的默认值，并且在调用搜索功能时，selectedEventForSearch变量实际上是数组（键）。 如果尝试使用"key for (key, value) in graphEventsAndFields track by key"并且在控制器中设置了$scope.selectedEventForSearch = firstKey ，它将无法正常工作，因此不会选择默认值。

我想念什么？ 我是否应该更改对象格式（例如，使用对象数组而不是具有多个键的对象）。 我可以用这种结构实现我所描述的吗？ （优选地）。 谢谢！

Answer 1

最后，我将数据集格式更改为包含{eventName: 'evn', fields: [..., ..., ...]}类的对象的数组。 在前端，代码更改为：

            <div class="form-horizontal">
                <div class="form-group" style="margin-bottom: 5px;">
                    <label class="control-label col-xs-2" style="font-weight: normal;">Event: </label>
                    <div class="col-xs-10">
                        <select class="form-control indexDropDown ng-pristine ng-valid pulseControl ng-touched"
                                ng-options="obj.eventName for obj in graphEventsAndFields track by obj.eventName"
                                ng-model="selectedEventForSearch" ng-change="uiSelectIndex()">
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-xs-2" style="font-weight: normal;">Field: </label>
                    <div class="col-xs-10">
                        <select class="form-control indexDropDown ng-pristine ng-valid pulseControl ng-touched"
                                ng-options="field for field in selectedEventForSearch.fields"
                                ng-model="selectedFieldForSearch" ng-change="uiSelectIndex()">
                        </select>
                    </div>
                </div>
            </div>

并在控制器中：

$scope.selectedEventForSearch = $scope.graphEventsAndFields[0];
$scope.selectedFieldForSearch = $scope.selectedEventForSearch.fields[0];

现在可以了。