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];

现在可行。

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

1 个答案: