Question

我正在尝试使用一个下拉列表的值，然后过滤下一个下拉列表中显示的值。下拉列表中包含来自多个JSON文件的数据（如下所示）。

所需的结果是按Applications.Name过滤模板，因为您可以看到模板中还包含Application.Name，当选择第一个下拉列表时，我希望首先过滤结果以检查模板是否存在。 Application.Name == selectedTestScript.Application（这是第一个下拉列表的ng模型）。

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

应用程序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>

控制器：

$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 } } ]; });

<强>演示：

＆＃13;
＆＃13;
<!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>
＆＃13;
// Set curl options curl_setopt($ch, CURLOPT_HTTPHEADER, $headr); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_VERBOSE, true); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_HEADER, 1); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); // Set curl time options curl_setopt($curl, CURLOPT_TIMEOUT_MS, 2000); //in miliseconds curl_setopt($curl, CURLOPT_CONNECTTIMEOUT_MS, 500); //in miliseconds
＆＃13;
＆＃13;
＆＃13;

通过另一个下拉列表过滤下拉列表

1 个答案: