Filter Dropdown von einem anderen Dropdown

Question

Ich versuche, den Wert von einem Dropdown zu verwenden, um dann die Werte zu filtern, die im nächsten Dropdown angezeigt werden. Die Dropdownlisten werden mit Daten aus mehreren JSON-Dateien gefüllt (wie unten gezeigt).

Das gewünschte Ergebnis ist, die Vorlagen nach Applications.Name zu filtern, wie Sie sehen Vorlagen auch Application.Name enthält, wenn das erste Dropdown ausgewählt ist, möchte ich die Ergebnisse zuerst gefiltert werden, um zu prüfen, ob Vorlagen .Application.Name == selectedTestScript.Application (das ist das ng-Modell des ersten Dropdowns).

Kann mir jemand in die Richtung einiger nützlicher Ressourcen zeigen oder noch besser erklären, wo ich falsch liege? Jede Hilfe wird sehr geschätzt.

Anwendungen JSON:

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

} 

Vorlagen 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

Sie müssen nicht Ihre eigene filter erstellen, um dies zu erreichen.

Sie können einfach

dies ändern:

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

für:

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

Demo:

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>