Question

如何根据之前的选择框

在选择框上实现过滤数据

这是我的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

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

当我选择第一个选择框的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中的新手任何其他方法的过滤器.Thankyou

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

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

在父级中添加ng-model =“ng-model =”parentSelect“，然后用此代码替换子选择框

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

如何根据之前的选择框在选择框上实现过滤数据？

3 个答案: