填充依赖选择值

时间:2015-12-30 10:11:23

标签: javascript angularjs select

考虑这个Javascript对象数组。

$scope.keyName = [{
  'key': 'stringName',
  'type': 'String',
  'query': ['equalTo', 'notEqualTo', 'contains', 'startsWith', 'exists', 'doesNotExist']
}, {
  'key': 'email',
  'type': 'String',
  'query': ['equalTo', 'notEqualTo', 'contains', 'startsWith', 'exists', 'doesNotExist']
}, {
  'key': 'username',
  'type': 'String',
  'query': ['equalTo', 'notEqualTo', 'contains', 'startsWith', 'exists', 'doesNotExist']
}, {
  'key': 'buzzInAccess',
  'type': 'Boolean',
  'query': ['exists', 'doesNotExist']
}]

我正在尝试这样的事情

<div class="col-sm-3">
  <select name="a" class="form-control" ng-model="keyName">
    <option ng-repeat="x in keyName track by $index" value="[[x]]">[[x.key]]</option>
  </select>
</div>

<!--Query Parameter-->
<div class="col-sm-3">
  <select name="search" ng-model="searchParam.query" class="form-control">
    <option ng-repeat="y in keyName track by $index" value="y">[[y.query]]</option>
  </select>
</div>

第二个选择包含数组形式的所有值。

我想要实现的是显示两个select下拉列表。首先选择key,第二个选择已填充相应的query值。这是在Angular中完成的。如何根据相应的key值填充第二个选择。

感谢您的帮助。

1 个答案:

答案 0 :(得分:3)

您应该使用ng-options。以下是描述相同的代码。

JSFiddle

<div>
  <select ng-options="p.key for p in keyName" ng-model='selectedKey'></select>
  <select ng-options="p for p in selectedKey.query" ng-model='selectedQuery'></select>
  <span>{{keyName}}</span>
</div>