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

【问题标题】：How to bind two select inputs and set initial value for each of them如何绑定两个选择输入并为每个输入设置初始值
【发布时间】：2018-02-12 14:56:56
【问题描述】：

我在范围内有这张地图：$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>

我看到对于 (key, value) 迭代，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，它不起作用，没有选择默认值。

我错过了什么？我应该改变我的对象格式（例如有一个对象数组而不是一个具有多个键的对象）。我可以用这种结构实现我所描述的吗？（最好）。谢谢！

【问题讨论】：

firstKey的值是多少？？并请删除此行并检查ng-init="selectedFieldForSearch = selectedEventForSearch[0]"
第一个键的值是什么意思？它是一个字符串。仅用于测试的对象是：{"phishing": ["cluster_id","brands"],"auth":["ec_insert_date","origin_ip"]}。
我删除了这条线，我忘了它，我认为它可能会起作用。
那么你得到了答案:)
不管有没有这条线，它都不起作用。正如我所提到的，无论我是按键还是按值进行跟踪，它都不起作用。另外， selectedEventForSearch 不是键，而是数组（值）。

标签： javascript html angularjs binding controller

【解决方案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];

现在可以了。

【讨论】：