How to show dependent select boxes options in angular js

Question

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.

Solution 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="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>

Solution 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.

Solution 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/