angularjs - angular cascading dropdown based off one ng-model with multiple properties -
new angular , need cascading multiple dropdowns. 3 dropdowns getting values based off 1 data source (ng-model) multiple properties.
example of model:
org table name, division, section fields. name not unique. each name has 1 entry no division or section, , if there division name, there null value sections, , repeats each combination. ex:
org: [
{ name: epa, div: null, sect: null},
{ name: epa, div: office of water, sect: null},
{ name: epa, div: office of water, sect: aed},
{ name: epa, div: office of marine protection, sect: null},
{ name: doi, div: null, sect: null}, etc.
the goal when user chooses name, divisions populate (including null). when user chooses div, sections populate (including null). far, i've tried cascading example countries/states/cities, information coming different ng-models. of information coming 1 ng-model. i'm thinking maybe need filtering, model being same 3 selects.. i'm not sure how proceed. thanks!!
i trying hard have view handle of angular/bootstrap magic. in end, used of controller , added ng-change on each select.
<div class="form-group"> <label class="col-md-2 control-label">organization</label> <div class="col-md-10"> <select id="inputorganization_n" name="name" ng-model="neworg.name" ng-change="filterdivs($data)" ng-options="o.organization_id o.name o in allorganizations | unique: 'name' | orderby: name'"> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">division</label> <div class="col-md-10"> <select id="inputorganization_div" name="division" ng-model="neworg.division" ng-change="filtersecs($data)" ng-options="d.organization_id d.division d in filtereddivs | unique: 'division' | orderby:'division'"> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">section</label> <div class="col-md-10"> <select id="inputorganization_sec" name="section" ng-model="neworg.section" ng-options="s.organization_id s.section s in filteredsecs | unique: 'section' | orderby: 'section'"> </select> </div> </div>
then, $scope.filtereddivs updated based on $data passed in ng-change event.
for (var = 0; < $scope.allorganizations.length; i++) { if ($scope.allorganizations[i].name == data.name) { $scope.filtereddivs.push($scope.allorganizations[i]); }; };
and same sections, based on $data passed ng-change on division.
Comments
Post a Comment