How to show dependent select boxes options in angular js

All we need is an easy explanation of the problem, so here it is.

I have a form and I want to have two select boxes so that in one of them certain options would show/hide based on the current value of another select box.

e.g

Select box X Options :
A
B

Select box Y Options :

1 // shows only when A is selected in Select box X
2 // A
3 // A
4 // shows only when B is selected in Select box X
5 // B
6 // B

Help please.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

The easiest way to set this up is to simply make the secondary collection dependent on the selection of the first one. You can do this any number of ways, but simply swapping out the collection that is bound is your best bet.

A simple example:

(function() {
  'use strict';

  function InputController() {
    var secondary = {
        A: [1, 2, 3],
        B: [3, 4, 5]
      },
      vm = this;

    vm.primary = ['A', 'B'];
    vm.selectedPrimary = vm.primary[0];

    vm.onPrimaryChange = function() {
      vm.secondary = secondary[vm.selectedPrimary];
    };
  }

  angular.module('inputs', [])
    .controller('InputCtrl', InputController);

}());
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<div class="container" ng-app="inputs" ng-controller="InputCtrl as ctrl">
  <div class="row">
    <div class="col-xs-6">
      <h3>Primary</h3>
      <select class="form-control" ng-model="ctrl.selectedPrimary" ng-options="item for item in ctrl.primary" ng-change="ctrl.onPrimaryChange()"></select>
    </div>
    <div class="col-xs-6">
      <h3>Secondary</h3>
      <select class="form-control" ng-model="ctrl.selectedSecondary" ng-options="item for item in ctrl.secondary"></select>
    </div>
  </div>
</div>

Method 2

Though you have not tried anything, I will still show how you can change the value of a select using the value of another select, see this http://jsfiddle.net/HB7LU/10721/

I have taken two similar arrays, and repeated them in select using ng-options

  $scope.values = [{
  id: 1,
  label: 'aLabel',
  subItem: 'abc'
}, {
  id: 2,
  label: 'bLabel',
  subItem: 'pqr'
}];


     $scope.values2 = [{
  id: 1,
  label: 'aLabel',
  subItem: 'abc'
}, {
  id: 2,
  label: 'bLabel',
  subItem: 'pqr'
}];


 <select ng-options="item.label as item.subItem for item in values " ng-model="selected1"></select>


      <select ng-options="item2.label as item2.subItem for item2 in values2 " ng-model="selected2" ng-change='fun()'></select>

Now there is no trick here,
You just call a function fun on change of the select number2

 $scope.fun=function(){
        $scope.selected1=$scope.selected2;
    },

and change the model select1 with the value of select2.

Hope this helps.

Method 3

Okay this worked for me

var propertiesSearchModule = angular.module('propertiesSearchModule');

    propertiesSearchModule.controller('searchFormController', ['$scope' ,'$rootScope', function($scope, $rootScope) {

        $scope.a = [
            {label:'Sale', value:'sale'},
            {label:'Rent', value:'rent'}
        ];

        $scope.t = {
            residential : {
                label:'Residential', value:'residential',
                uOptions : [
                    {label: 'Villa', value: 'villa'},
                    {label: 'Apartment', value: 'apartment'},
                    {label: 'Duplex', value: 'duplex'},
                    {label: 'Office', value: 'office'}
                ]
            },
            commercial : {
                label:'Commercial', value:'commercial',
                uOptions :[
                    {label: 'Penthouse', value: 'penthouse'},
                    {label: 'Full floor', value: 'full floor'},
                    {label: 'Hotel apartment', value: 'hotel apartment'},
                    {label: 'Warehouse', value: 'warehouse'}
                ]
            }
        }
    }]);

And here is the HTML

<div data-ng-controller="searchFormController">

            <form name="propertiesSearchForm" action="" method="get">

            <select name="t" id="select-type" class="search-select" data-ng-options="v.value as v.label for (x,v) in t" data-ng-model="fields.t">
                <option value="" selected="selected">Types</option>
            </select>


            <select name="u" id="select-unit-type"  data-ng-options="y.value as y.label for y in t[fields.t].uOptions" data-ng-model="fields.u">
                <option value="" selected="selected">Unit Type</option>
            </select>

            </form>

        </div>

Inspired by : http://jsfiddle.net/annavester/Zd6uX/

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply