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

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -