如何在之前的selectbox的基础上实现selectbox上的过滤数据？

Question

如何在前面的selectbox

的基础上实现selectbox上的过滤数据

这是我的JSON数据

$scope.data=
[
     {
      "parentName": "George",
      "childName": "George Child1"          
     },
     {
      "parentName": "Folly",
      "childName": "FollyChild1"         
     },
     {
      "parentName": "Sally",
      "childName": "Sally Child1"          
     },

     {
      "parentName": "George",
      "subCatName": "GeorgChild2"          
     },
     {
      "parentName": "Folly",
      "subCatName": "FollyChild2"         
     },
     {
      "parentName": "Folly",
      "subCatName": "FollyChild3"          
     },
     {
      "parentName": "Sally",
      "subCatName": "Infant Food"          
     }

]

这是我的 JSON 数据。

我有两个select盒子第一个 Select 显示 parentName
的框第二个 Select 显示 childName

的框

最初第一个 select 框显示在 ---select---- 那时第二个 select 框被禁用

当我 select 在第一个 select 框的父名称上时，我只需要在第二个 select 框

中显示该父项的子名称

这是我的视图页面结构，我需要将其水平对齐

  <div class="col-md-3"> 
    <form>
      <div class="form-group">
        <label for="exampleSelect1"><b>Parent</b></label>
        <select class="form-control" id="data">
          <option ng-repeat="(key,value) in data | orderBy:'parentName'| groupBy:'parent'">{{key}}</option>           
        </select>
      </div>              
    </form>  
  </div>      
  <div class="col-md-3">      
    <form>    
      <div class="form-group">
        <label for="exampleSelect1"><b>Child Names</b></label>
        <select class="form-control" id="childnames">
          <option>--Select--</option>             
        </select>
      </div>          
    </form>     
</div>

需要任何修改。请帮助我

我是 AngularJS 任何过滤器的新手，用于获取此 way.Thankyou

的任何其他方法

Answer 1

<select class="form-control" id="childnames" ng-options="n.subCatName as    n.subCatName for n in data | filter:{parentName:parentSelect}" >
    <option>--Select--</option>             
</select>

在父级中添加 ng-model="ng-model="parentSelect" 然后用此代码替换子 select 框

Answer 2

以下更改对我有用：-

向父 select 元素添加模型。<select class="form-control" id="data" ng-model="parent">
使用此模型过滤 childNames <select class="form-control" id="childnames"><option ng-repeat="value in data | filter: parent">{{value.childName}}</option></select>

Answer 3

您可以查看plnkr here。

秒select

<select class="form-control" id="childnames" ng-model="vm.child"
    ng-options="data.childName for data in vm.data| filter: {parentName:vm.selectedParent}">
    <option>--Select--</option>
    </select>
</div>

如何在之前的selectbox的基础上实现selectbox上的过滤数据？

How to achieve filtered data on the selectbox based on the previous selectbox?

angularjs

angularjs-directive

angularjs-filter