Currently, I am attempting to utilize the value selected in one dropdown to filter the options displayed in the subsequent dropdown. Both dropdowns are populated with data retrieved from several JSON files (as illustrated below).
The objective here is to filter the Templates based on Applications.Name. As you can observe, each template also includes Application.Name within it. When the first dropdown is chosen, my aim is for the results to be filtered by checking if templates.Application.Name matches the selectedTestScript.Application (which serves as the ng-model for the first dropdown).
I would greatly appreciate any guidance towards useful resources or even an explanation of where I am going wrong. Any assistance provided will be highly valued.
Applications JSON:
{
"Applications": [
{"Id": 1, "Name":"Deep Thought"},
{"Id": 2, "Name":"Agent Smith"},
{"Id": 3, "Name":"Glados"},
{"Id": 4, "Name":"Jarvis"}
]
}
Templates 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;
}