javascript - 通过另一个下拉菜单过滤下拉菜单

Question

我正在尝试使用一个下拉列表的值来过滤下一个下拉列表中显示的值。下拉列表中填充了来自多个 JSON 文件的数据(如下所示)。

期望的结果是按Applications.Name过滤模板，因为您可以看到模板内部也有Application.Name，当选择第一个下拉列表时，我希望首先过滤结果以检查模板。 Application.Name == selectedTestScript.Application(这是第一个下拉列表的 ng-model)。

有人能给我指出一些有用资源的方向，或者更好地解释我哪里出错了吗？任何帮助是极大的赞赏。

应用程序 JSON:

{
  "Applications": [
  {"Id": 1, "Name":"Deep Thought"},
  {"Id": 2, "Name":"Agent Smith"},
  {"Id": 3, "Name":"Glados"},
  {"Id": 4, "Name":"Jarvis"}
  ]

} 

模板 JSON:

{
  "Templates": [
  {"Id": 1, "Name":"Deep Thought template 1", "Application":{"Name": "Deep Thought", "Id": 1}},
  {"Id": 2, "Name":"Deep Thought template 2", "Application":{"Name": "Deep Thought", "Id": 1}},
  {"Id": 3, "Name":"Agent Smith template 1", "Application":{"Name": "Agent Smith", "Id": 2}},
  {"Id": 4, "Name":"Agent Smith template 2", "Application":{"Name": "Agent Smith", "Id": 2}},
  {"Id": 5, "Name":"Glados template 1", "Application":{"Name": "Glados", "Id": 3}},
  {"Id": 6, "Name":"Glados template 2", "Application":{"Name": "Glados", "Id": 3}},
  {"Id": 7, "Name":"Jarvis template 1", "Application":{"Name": "Jarvis", "Id": 4}},
  {"Id": 8, "Name":"Jarvis template 2", "Application":{"Name": "Jarvis", "Id": 4}}   
  ]

} 

HTML:

<div class="panel-body">
     <div>
          <label for="appName" class="control-label col-xs-3">Application:</label>
          <div class="col-xs-9">
                <select id="appName" class="form-control col-sm-4" placeholder="Please select an application" ng-model="selectedTestScript.Application" ng-options="application.Name for application in applications" />
          </div>
     </div>
     <div>
          <label retinafor="importActions" class="control-label col-xs-3">Templates:</label>
          <div class="col-xs-9">
               <div class="input-group">
                    <select class="form-control" placeholder="Please select an action" ng-model="selectedTemplate" ng-options="template.Name for template in templates | filter :{templates : templatesFilter}" />
                    <div class="input-group-btn">
                         <button type="button" class="btn btn-default btn-general" ng-click="importTemplate(selectedTemplate); actionList = true"><i class="fa fa-plus iconswhite"></i> Import</button>
                    </div>
               </div>
          </div>
     </div>
</div>

Controller :

$scope.templatesFilter = function (application) {
  return templates.Application.Name === $scope.selectedTestScript.Application;
}

Answer 1

您不需要构建自己的过滤器来实现此目的。

您可以简单地更改

这个:

<select class="form-control" placeholder="Please select an action" ng-model="selectedTemplate" ng-options="template.Name for template in templates | filter :{templates : templatesFilter}" />

用于:

<select class="form-control" placeholder="Please select an action" ng-model="selectedTemplate" ng-options="template.Name for template in templates | filter: { Name: selectedTestScript.Application.Name }"></select>

演示:

angular.module('app', [])
  .controller('mainCtrl', function($scope) {
    $scope.applications = [  
       {  
          "Id":1,
          "Name":"Deep Thought"
       },
       {  
          "Id":2,
          "Name":"Agent Smith"
       },
       {  
          "Id":3,
          "Name":"Glados"
       },
       {  
          "Id":4,
          "Name":"Jarvis"
       }
    ];

    $scope.templates = [  
       {  
          "Id":1,
          "Name":"Deep Thought template 1",
          "Application":{  
             "Name":"Deep Thought",
             "Id":1
          }
       },
       {  
          "Id":2,
          "Name":"Deep Thought template 2",
          "Application":{  
             "Name":"Deep Thought",
             "Id":1
          }
       },
       {  
          "Id":3,
          "Name":"Agent Smith template 1",
          "Application":{  
             "Name":"Agent Smith",
             "Id":2
          }
       },
       {  
          "Id":4,
          "Name":"Agent Smith template 2",
          "Application":{  
             "Name":"Agent Smith",
             "Id":2
          }
       },
       {  
          "Id":5,
          "Name":"Glados template 1",
          "Application":{  
             "Name":"Glados",
             "Id":3
          }
       },
       {  
          "Id":6,
          "Name":"Glados template 2",
          "Application":{  
             "Name":"Glados",
             "Id":3
          }
       },
       {  
          "Id":7,
          "Name":"Jarvis template 1",
          "Application":{  
             "Name":"Jarvis",
             "Id":4
          }
       },
       {  
          "Id":8,
          "Name":"Jarvis template 2",
          "Application":{  
             "Name":"Jarvis",
             "Id":4
          }
       }
    ];
  });

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <div class="panel-body">
    <div>
      <label for="appName" class="control-label col-xs-3">Application:</label>
      <div class="col-xs-9">
        <select id="appName" class="form-control col-sm-4" placeholder="Please select an application" ng-model="selectedTestScript.Application" ng-options="application.Name for application in applications"></select>
      </div>
    </div>
    <div>
      <label retinafor="importActions" class="control-label col-xs-3">Templates:</label>
      <div class="col-xs-9">
        <div class="input-group">
          <select class="form-control" placeholder="Please select an action" ng-model="selectedTemplate" ng-options="template.Name for template in templates | filter: { Name: selectedTestScript.Application.Name }"></select>
          <div class="input-group-btn">
            <button type="button" class="btn btn-default btn-general" ng-click="importTemplate(selectedTemplate); actionList = true"><i class="fa fa-plus iconswhite"></i> Import</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>