javascript - filter dropdown by another dropdown -
i'm trying use value of 1 dropdown filter values displayed in next dropdown. dropdowns populated data multiple json files (as shown below).
the desired result filter templates applications.name, can see templates has application.name inside of it, when first dropdown selected results first filtered check if templates.application.name == selectedtestscript.application (which ng-model of first dropdown).
could point me in direction of useful resources or better yet explain i'm growing wrong? appreciated.
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 application" ng-model="selectedtestscript.application" ng-options="application.name 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 action" ng-model="selectedtemplate" ng-options="template.name 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; }
you don't need build own filter achieve this.
you can change
this:
<select class="form-control" placeholder="please select action" ng-model="selectedtemplate" ng-options="template.name template in templates | filter :{templates : templatesfilter}" /> for:
<select class="form-control" placeholder="please select action" ng-model="selectedtemplate" ng-options="template.name 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 application" ng-model="selectedtestscript.application" ng-options="application.name 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 action" ng-model="selectedtemplate" ng-options="template.name 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>
Comments
Post a Comment