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

问题描述：

我在此范围内有此映射：$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，它不起作用，所以没有选择默认值。

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

'firstKey'的价值是什么？并请删除这行，并检查'ng-init =“selectedFieldForSearch = selectedEventForSearch [0]”' –

你是什么意思什么是第一个键的价值？它是一个字符串。仅用于测试的对象是：{“phishing”：[“cluster_id”，“brands”]，“auth”：[“ec_insert_date”，“origin_ip”]}。 – Adi

我删除了该行，我忘了它，我认为它可能工作。 – Adi

答

最后，我改变了数据集格式为{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>

和Controller：

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

现在，它的工作原理。

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

相关推荐