如何在之前的选择框的基础上实现对选择框的过滤数据？答案

【问题标题】：How to achieve filtered data on the selectbox based on the previous selectbox?如何在之前的选择框的基础上实现对选择框的过滤数据？
【发布时间】：2016-02-25 07:15:39
【问题描述】：

如何在前面的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 数据。

我有两个选择框显示 parentName 的第一个选择框
第二个显示childName的选择框

最初第一个选择框显示在 ---select---- 中，此时第二个选择框被禁用

当我选择第一个选择框的 parentName 时，我只需要在第二个选择框中显示该父项的 childNames

这是我的视图页面结构，我需要以水平方式对齐它

  <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 的新手，任何其他方法的过滤器都可以通过这种方式获得。谢谢

【问题讨论】：

标签： angularjs angularjs-directive angularjs-filter

【解决方案1】：

您可以查看plnkr here。

第二次选择

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

【讨论】：

首先，谢谢...工作正常，但问题是它无法在父子项和子项中显示----Select----。如果显示父母，还有一件事选择孩子需要被禁用
我为 vm.data 中的数据添加了但它不能按组工作
工作正常，谢谢您的时间。但是当我在选择子选择框后在父选择框中单击----选择----时出现一个问题子选择框将禁用但不会重新出现----选择---自动在子框中。实际上我需要的是当我在父选择框中选择---选择-时，子框应该被禁用并显示---选择---。好的，谢谢，如果您有任何想法，请与我分享..
我还需要在子选项中添加一个过滤器是可能的，例如：removeWith:{childName : 'others'} 当我添加它但它不起作用时只有一个过滤器在 ng-选项为什么？是否有任何规定使用它... ng-options="data.childName for data in vm.data| filter: {parentName:vm.selectedParent} | removeWith:{childName : 'others'}">
我更新了 plnkr。关于removeWith，我试了一下：| removeWith:{childName : 'Infant Food'}，它工作正常。对于更改父级的情况，应将 view 的 vm.child 属性更改为 undefined 以将其设置为 ---Select---

【解决方案2】：

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

在 parent 中添加 ng-model="ng-model="parentSelect" 然后用此代码替换子选择框

【讨论】：

【解决方案3】：

以下更改对我有用：-

将模型添加到父选择元素。<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>

【讨论】：