How to show parameters of dependent selection options in angular js

Question

I have a form, and I want to have two selection blocks so that in one of them some parameters show / hide based on the current value of the other selection field.

eg

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 me please.

Answer 1

The easiest way to set this up is to simply make the secondary collection dependent on the first one. You can do this in any number of ways, but simply replacing the assembled collection is the best choice.

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> 

Answer 2

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

I took 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 the fun function when changing select number2

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

and change the select1 model with the value select2 .

Hope this helps.

Answer 3

Ok, that 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/